We Keep Coding

GSAP ScrollTrigger background color change animation not working well on Safari

I'm trying to make a gsap animation that switches the viewport's background color depending on your scrolling position. The animation works great on Chrome and on FireFox, but on Safari it just looks bad, very laggy and the colors don't transition into the page, but rather just pop up with a delay.
Here is my animation (I am using Vue.js)
backgroundAnimation() {
let $projects = gsap.utils.toArray(this.htmlID + " .project-wrapper");
let projectListTl = gsap.timeline({
scrollTrigger: {
trigger: this.htmlID,
start: "top center",
end: "bottom center",
ease: "none",
scrub: true,
markers: false,
onLeave: ({ progress, direction, isActive }) =>
document.documentElement.style.setProperty("--background", "white"),
},
});
$projects.forEach(($project, i) => {
projectListTl.to("html", {
duration: 0.1,
"--background": $project.dataset.projectColor,
});
projectListTl.to("html", {
delay: 0.3,
duration: 0.2,
"--background": "transparent",
});
});
},
(The method above runs when there is an update on the component)
updated: function () {
this.$nextTick(function () {
this.backgroundAnimation();
const self = this;
ScrollTrigger.matchMedia({
"(min-width: 1024px)": function () {
self.scrollAnimation();
},
});
});
},
Does anybody have any ideas as to why this is happening on Safari?

Lag on GSAP animation for mobile browsers

I'm playing around with some simple GSAP animations and I'm noticing that there is an issue with them running smoothly on a mobile browser(Brave and Chrome Android). For example the following code looks perfect on desktop devices while on mobile the animations seem to lag.
<div class="container" id="contentContainer">
<div class="content-start">
<div class="medium-box box-1">
The Mekong river originates in the Himalayas in China, where it is known as the Lancang. It flows through the Lower Mekong Basin countries of Myanmar, Laos, Thailand, Cambodia and Vietnam, where it reaches the South China Sea.
</div>
</div>
</div>
let mySplitText = new SplitText('.box-1', { type: "words,chars" }),
chars = mySplitText.chars; //an array of all the divs that wrap each character
gsap.fromTo('.box-1',{y: '100%', opacity: 0},{y: 0, opacity: 1, duration: 1, scrollTrigger: {
trigger: '.box-1',
start: 'top 60%',
end: "bottom 50%",
pin: true,
pinSpacing: false,
markers: true,
onEnter: () => {
gsap.to('.box-1',{duration: 1, y: '0', opacity: 1})
gsap.from(chars, {duration: 0.5,opacity: 1,scale: 0,ease: "back",stagger: 0.01})
},
onLeave: () => {
gsap.to('.box-1',{duration: 1, y: '-100%', opacity: 0})
},
onEnterBack: () => {
gsap.to('.box-1',{duration: 1, y: 0, opacity: 1})
gsap.from(chars, {duration: 0.5, opacity: 1,scale: 0,ease: "back",stagger: 0.01})
},
onLeaveBack: () => {
gsap.to('.box-1',{duration: 1, y: '100%', opacity: 0})
}
}})
I think one of the reasons the animation lags is because of the navigation bar on mobile devices that pops up when scrolling down, resizing the viewport, and changing the start and end triggers.
I also realize since I'm quite new that my code might not be very efficient and that might impact performance.
I would appreciate any tips as to how to make this scrolling experience smooth for all users on all devices.Thanks in advance.

How to scroll to a Label in GSAP scrollTrigger scrub Timeline

So I'm having this problem I have a scrollTrigger Timeline and i want a button to scroll to take me to a specific position.
I tried using seek but it didnt work even ScrollTo plugin lack a support for this
I have a gsap Timeline
const tl = gsap.timeline({
paused: true,
scrollTrigger: {
trigger: '.home',
start: 'top top',
end: 'bottom+=1000 top',
pin: true,
scrub: 0.5,
markers: true
},
defaults: {
duration: 2
}
})
// Main home animation
.to(['.left'], {
clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)',
ease: 'power1.out'
}, 'scene')
// Name scaling animation
.to(['.name-title'], {
scale: 0,
ease: 'power1.out'
}, 'scene')
.from(document.getElementById('achievements'), {
autoAlpha: 0
}, '-=1.5')
// Achievements reveal animation
.from(document.getElementById('achievements').querySelectorAll('.row'), {
motionPath: {
path: [
{
x: 0,
y: 100
}
]
},
autoAlpha: 0,
stagger: 0.2,
ease: 'power3.out'
}, '-=2')
.addLabel('achievements')
// Hide achievements animation
.to(document.getElementById('achievements').querySelectorAll('.row'), {
motionPath: {
path: [
{
x: 0,
y: -100
}
]
},
autoAlpha: 0,
stagger: 0.2,
ease: 'power3.in'
}, '+=2')
and i have a button in my home that should take me to achievements section but i cant find any proper solution.

So i deviced my own workaround solution (P.S: im using Vue)
scrollTo () {
const pos = Math.ceil(document.body.scrollHeight * (this.loadTl.labels.achievements / this.loadTl.duration()))
gsap.to(window, { duration: 2, scrollTo: pos, ease: 'linear' })
}
loadTl here is a computed property for my Timeline i Found the position of achievements and used ScrollToPlugin to scroll to that pixel.
But im looking for a better way of doing this.

jQuery CarouFredSel plugin triggering a configuration

i have a little problem, everything i think quite good, example is here: a link at bottom of page "Partneriai". The idea is when on mouse over and out on next and previous buttons set a speed (duration) a little bit faster, and when mouse out set speed duration normal (default).
And it's everything working, but the problem is : need to wait when one item is slide over from div, and then is setting a configuration of duration. I need immediately when mouse over, out at next,prev button and set those configuration. I can't find issue.
My code:
$(".sponsors-slider-slide").carouFredSel({
scroll: {
items: 1,
duration: 2000,
queue: true,
timeoutDuration: 0,
easing: "linear",
pauseOnHover: "immediate-resume",
fx: "scroll"
},
responsive: false,
circular: true,
infinite: false,
swipe: {
onTouch: true,
onMouse: true
},
width: "variable",
height: "variable",
items: {
visible: 4,
minimum: 0,
width: "variable",
height: "variable"
},
align: false,
debug: false
});
and example of next button:
$("#sponsors-slider-next").on("mouseover mouseout", function(e){
if(e.type == "mouseover")
{
$(".sponsors-slider-slide").trigger("configuration", ["direction", "left"]);
$(".sponsors-slider-slide").trigger("configuration", ["scroll.duration", 1000, true]);
}
if(e.type == "mouseout")
{
$(".sponsors-slider-slide").trigger("configuration", ["direction", "left"]);
$(".sponsors-slider-slide").trigger("configuration", ["scroll.duration", 2500, true]);
}
return false;
});
The question is, how to set scroll.duration when mouseover immediately on next button, not when carousel is finish slide ?
Thanks in advice.

It has to finish the transition before it can change configurations. To finish the transition immediately, trigger the finish event.
$(".sponsors-slider-slide").trigger('finish');
Depending on other settings, this may make it look a bit "glitchy", but at least it doesn't give the impression that the buttons aren't working.
BTW, it would be more efficient to chain multiple methods rather than repeat selectors:
$(".sponsors-slider-slide")
.trigger("finish")
.trigger("configuration", {
direction: "left",
scroll: {
duration: 1000
},
reInit: true //not sure that you need this
});

How to get the qtip style as shown on their homepage?

Just added this plugin to my site. I want "qtips" exactly like the ones they have when you mouse over the big browser icons near the bottom.
I can't figure out what styles they're using for those. I've currently got this, but it doesn't come out the same:
$('a[title]').qtip({
'position': {
my: 'bottom center',
at: 'top center'
},
'style': {
tip: true,
classes: 'qtip-dark'
}
});
Anyone know what they're using?

You want to use qtip-tipsy instead of qtip-dark.
$('a[title]').qtip({
'position': {
my: 'bottom center',
at: 'top center'
},
'style': {
tip: true,
classes: 'qtip-tipsy'
}
});