Rodrigo

Hi @wayz and welcome to the GreenSock forums!
 
When using GSAP in a React environment always use GSAP Context:
https://greensock.com/docs/v3/GSAP/gsap.context()
 
Also take a look at the resources in this article:
 
Finally we have a collection of starter templates in Stackblitz so you can fork one of them and illustrate your issue. Please don't include all the styles, components and everything from your project, just enough to show the problem you're having:
https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters
 
Hopefully this helps.
Happy Tweening!

Hi,
 
Maybe use this in  your toggle actions:
toggleActions: "restart none reverse reverse"  
Hopefully this helps.
Happy Tweening!

Hi @Nihal and welcome to the GreenSock forums!
 
Snap is available on;y with the Inertia Plugin:
https://greensock.com/docs/v3/Plugins/InertiaPlugin
 
Out of the box Draggable has a Live Snap feature that works as you drag. The other option is to create your own custom logic in the onDragEnd callback, to create your own snapping function. Something like this:
Draggable.create(wheel, { allowContextMenu: true, type: "rotation", trigger: wheel, onDragEnd: function() { gsap.to(wheel, { rotation: gsap.utils.snap((360 / images.length), this.rotation) }); }, snap: { rotation: gsap.utils.snap(360 / images.length) } }); Here is a fork of your codepen using this code:

See the Pen rNQmOvQ by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi,
 
Sure thing, just update the loop's timeScale property and then tween it back to 1:
const emblemLoop = gsap.to(".emblem--sprite", 1, { repeat: -1, x: -6750, ease: "steps(50)" }); gsap.to(".emblem--container", { scrollTrigger: { trigger: ".emblem--container", start: "top top", end: "+=6750", markers: true, //pin: true, scrub: 0.8, onUpdate: () => { emblemLoop.timeScale(3); gsap.to(emblemLoop, { timeScale: 1, ease: "power2.in", duration: 1 }); } }, scale: 0.5, x: 100, y: 100, ease: "power2.out" }); https://greensock.com/docs/v3/GSAP/Tween/timeScale()
 
Keep in mind that GSAP can tween any numeric value on any object you feed it and  GSAP Tweens/Timelines are objects so you can tween the timeScale of them.
 
Here is a fork of your codepen:

See the Pen rNQyrVK by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi,
 
This seems more related to the way touch devices handle scroll.
 
Try using normalizeScroll and see how it goes:
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()
 
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); ScrollTrigger.normalizeScroll(true); Also you could try a more specific snap configuration in your ScrollTrigger instance (scroll down until the snap section and see the object configuration). Basically you want to snap to an array of values [0, 1] so it goes to the start or end point of the ScrollTrigger instance:
https://greensock.com/docs/v3/Plugins/ScrollTrigger
 
Hopefully this helps.
Happy Tweening!

Hi,
 
On top of @Sveninyo's advice and request for a minimal demo, be completely sure that your ScrollTrigger instances are created in the order they should happen in your app, so ScrollTrigger takes into account for it's calculations any pinning it has done before.
 
Also if you have images or custom fonts, be sure that they are loaded before creating your ScrollTrigger instances in order to avoid layout shifting after creating the ScrollTrigger instances.
 
Hopefully this helps.
Happy Tweening!

Hi,
 
I'm not completely sure I follow what you're trying to do. But in your last ScrollTrigger you have just "bottom" as start point, so it defaults to "bottom top" so that never happens, because the bottom of the trigger never reaches the top of the viewport (always use markers in development and while debugging). Also maybe a from instance is more what you're trying to achieve:

See the Pen eYQgKVy by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi,
 
Maybe something like this:

See the Pen rNQjKzp by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi,
 
There two possible issues here.
 
The first is the most clear. You are creating a set of loops outside the scope of GSAP MatchMedia and then if the screen is bigger than 768px you are using the same variables to create the loops again. Also you're using the let keyword which is actually creating a new set of variables in the MatchMedia which will not replace the ones you already created. To know more read this:
https://www.freecodecamp.org/news/how-javascript-works-behind-the-scene-javascript-execution-context
 
Create a GSAP MatchMedia for smaller screens and then create a different one for larger screens in order to be 100% sure that any other GSAP instances related to the same targets are completely reverted and clear before creating new ones, that's the magic GSAP MatchMedia does.
 
The second issue is that you have to wait for your images to be completely loaded before creating the loops. Any change in the elements width can cause unexpected behaviour.
 
Also your images have fluid widths and your <li> elements have visible overflow plus this flex config is not helping as well: flex: 1 0 auto;
 
Finally there is an issue that I can't put my finger on right now when the loop instance is created with reversed: true, for that you have to clear the styles using clearProps in GSAP MatchMedia cleanup function.
 
Here is a fork of your codepen that seems to work:

See the Pen dyQNeRZ by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi,
 
The thing is that Draggable is works with the translate3d() function and xPercentage works with the translate() function. The latter works only for horizontal and vertical movement while translate3d() does it in 3D space. Is not really an issue per se, just the fact that in CSS you can actually combine them, which is exactly what GSAP is doing.
 
Maybe this is what you're trying to do?
Draggable.create(".drag", { onDragEnd: () => { gsap.to(".drag", { x: "500%" }); } }); Here is a fork of your codepen:

See the Pen XWyNoVM by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi,
 
I cant think of an example that does exactly what you're trying to achieve, but maybe these examples can nudge you in the right direction:

See the Pen abZmqgW by GreenSock (@GreenSock) on CodePen
 

See the Pen JjXqMZK by GreenSock (@GreenSock) on CodePen
 

See the Pen LYZYPpE by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi,
 
Indeed @akapowl is right, you have three different GSAP instances with the same ScrollTrigger config in them:
scrollTrigger: { trigger: "#container", scrub: true, start: "top 80%", end: "top 20%", markers: true }, So just create a timeline with that config and then attach the individual instances to it, just like in @Carl's example:
const tl = gsap.timeline({ scrollTrigger: { trigger: "#container", scrub: true, start: "top 80%", end: "top 20%", markers: true }, }) .from("#box-1", { y: 160, x:40, }) .from("#box-2", { y: 80, x: 80, }) .from("#box-3", { y: 240, x: 80, }); That should work in the same way and is less verbose and DRY.
 
Hopefully this helps.
Happy Tweening!

Hi,
 
If you want the button to show and handle some animations in that particular range then, regardless of what you have in your CSS that should work without GSAP to know that there are no issues on that side of the equation, even more reason to keep everything inside the GSAP MatchMedia instance and nothing outside.
 
The example you presented has a button that is visible on every screen width, not just small ones, so it really doesn't match the description you give here:
 
I updated the codepen example:

See the Pen abQBbGZ by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi,
 
Unfortunately is really hard for us to debug a live site. The one thing I can see happening is that the browser's address bar is showing/hiding as you scroll up/down, so maybe you could try using ScrollTrigger's normalizeScroll method:
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()
 
This doesn't seem related to screen size as I tried the link in small widths on desktop so is not related to that or something in your CSS that could be the reason.
 
Give normalizeScroll a try and let us know.
 
Hopefully this helps.
Happy Tweening!

Hi,
 
The only thing I can tell you is that the observer instance has an event object with a lot of information there and checking with my laptop (that is a bit old and uses Ubuntu 20) that the trackpad reports a wheel event:
Observer.create({ onChange: (self) => { console.log(self.event) // -> WheelEvent Object }, }); And that particular wheel event has a deltaX different than zero, so you could check for that in order to prevent it. If the event is vertical the deltaX will be zero and the deltaY value will be different than zero.
 
The issue here is that I don't know if every trackpad in every laptop out there will report the trackpad as a wheel event, you'll have check that.
 
Finally if you are already using ScrollTrigger, there is no need to load the Observer Plugin, since it's baked into ScrollTrigger:
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.observe()
 
Hopefully this helps.
Happy Tweening!

Hi,
 
Maybe this thread and the final example in it can provide a good starting point:
 
Also take a look at these:

See the Pen oNQNrQx by GreenSock (@GreenSock) on CodePen
 

See the Pen 4a9d18b3def973c8e4e5e0d106b2e664 by GreenSock (@GreenSock) on CodePen
 

See the Pen bGexQpq by GreenSock (@GreenSock) on CodePen
 

See the Pen RwqbBWo by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi,
 
This example also might help:

See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen
 
Happy Tweening!

Yeah, pretty much shrinking one while at the same time expanding another will cause this, especially if you're animating the width property. You can play and make the negative timeScale value event lower (like -3 or -4) in order to reduce that.
 
I'm not that familiar with grid layouts so I couldn't offer you a definitive answer on the subject. Another option would be to use Flex.
 
A final alternative is to select the remaining elements (the other two) and animate their width to a smaller value so they all fit their container.
 
Happy Tweening!

Hi,
 
This is basically about adding an extra instance to the timeline after the loop that takes all the elements that extra step forward, soto speak.
 
I'm having a few issues trying to follow your code, it's almost 250 lines and I'm not sure what is doing what exactly. To give you some idea it should be something like this:
const tl = gsap.timeline({ // Timeline and ScrollTrigger Config Here }); elements.forEach((element, index) => { // Your loop stuff here }); // After the loop add a final instance to the timeline // that moves everything to the final position tl.to(elements, { // Config here }); Hopefully this helps.
Happy Tweening!

Hi,
 
You might want to have a look at the Horizontal Seamless Loop helper function:
https://greensock.com/docs/v3/HelperFunctions#loop
 
Here is an example:

See the Pen zYLQyzQ by GreenSock (@GreenSock) on CodePen
 
Hopefully this  helps.
Happy Tweening!

Hi @Salah Belaid and welcome to the GreenSock forums!
 
In this case is better to use pinning for each element and use pinSpacing false and use the endTrigger property in order to keep the elements pinned until that particular element reaches certain position in the viewport.
 
Something like this:

See the Pen abQNBVv by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!

Hi @silver99temp and welcome to the GreenSock  forums!
 
Those files are not owned by GreenSock as that particular example was forked from this:

See the Pen MyoBaY by patrickwestwood (@patrickwestwood) on CodePen
 
You can contact the author of the original Codepen in order to check if He is the owner of those images or not. You can reach Him:
In the comments section:
https://codepen.io/patrickwestwood/details/MyoBaY In this article (or the links He provided there):
https://medium.com/@patrickwestwood/how-to-make-multi-layered-parallax-illustration-with-css-javascript-2b56883c3f27 Hopefully this helps.
Happy Tweening!

Hi,
 
Just a syntax error:
// Syntax in the breakpoint here mm.add("max-width: 1023px", () => { tlMainLogoRef.current = gsap .timeline({ paused: true }) .to(".mainLogo", { rotate: 0, scale: 0 }, "<"); }); You forgot the parenthesis around the breakpoint:
mm.add("(max-width: 1023px)", () => { tlMainLogoRef.current = gsap .timeline({ paused: true }) .to(".mainLogo", { rotate: 0, scale: 0 }, "<"); }); Happy Tweening!

Hi,
 
You are using an onComplete callback in order to do the Flip.from method. Is better to use ScrollTrigger's callbacks instead. In this case onEnter and onLeaveBack:
 
onEnter    Function - A callback for when the scroll position moves forward past the "start" (typically when the trigger is scrolled into view). It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity(). onEnterBack    Function - A callback for when the scroll position moves backward past the "end" (typically when the trigger is scrolled back into view). It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity().
onLeave    Function - A callback for when the scroll position moves forward past the "end" (typically when the trigger is scrolled out of view). It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity().
onLeaveBack    Function - A callback for when the scroll position moves backward past the "start" (typically when the trigger is scrolled all the way backward past the start). It receives one parameter - the ScrollTrigger instance itself which has properties/methods like progress, direction, isActive, and getVelocity().
 
Here is a fork of your codepen example:

See the Pen MWPQMyo by GreenSock (@GreenSock) on CodePen
 
Is worth noticing that in this example I'm wiring the scale animations to the Flip.from() instance, because that actually returns a GSAP Timeline.
 
Hopefully this helps.
Happy Tweening!

Hi,
 
This is the perfect job for the Flip Plugin
https://greensock.com/docs/v3/Plugins/Flip
 
Here is a super simple example:

See the Pen ZEmQBQg by GreenSock (@GreenSock) on CodePen
 
Hopefully this helps.
Happy Tweening!