Leaderboard

Just scrolled up and saw that it was was working in previous versions. Oh man, that's frustrating, sorry. I'll have a little test of some previous versions for you. 👀 In the meantime maybe this could be a base for a simplified down version? Edit - Gave it a simplification, if you could show us the issue on this pen that would be grand. Thank you! https://codepen.io/GreenSock/pen/qByJowo?editors=0011

I'd recommend reading up on how React's lifecycles work: https://reactjs.org/docs/hooks-effect.html and also this could be very useful as well:

Welcome to the GreenSock forum, @oveRuns7777. Maybe that's just a typo on your end? You are missing a closing bracket. ScrollTrigger.matchMedia({ "(min-width:1184px": () => { // <--- you have this ... ScrollTrigger.matchMedia({ "(min-width:1184px)": () => { // <--- should be this ... Also, ScrollTrigger.matchMedia() is deprecated if I recall correctly. You'll probably want to have a look at the newer gsap.matchMedia() https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

I just did exactly that, for some reason it didn't work last time, but now it does. I probably messed up something, so no real solution to provide. Thanks everyone, don't know what I did but I'm back on track!

I think you're missing a deps array for your useEffect (as well as garbage cleanup). useEffect(() => { ... }, [])

Hi, Sorry but I have very limited experience with both Webpack and Vite. Sure I use them all the time when scaffolding a project but in the lazy way: npm create vite@latest my-vue-app -- --template vue npm create vite@latest my-svelte-app -- --template svelte npm create vite@latest my-react-app -- --template react I just don't mess around with the configuration or creating a whole new project from scratch. It'd be great if you could create an example in Stackblitz or Codesandbox in order to have a better look or provide a public repo (don't include bonus plugins, use gsap-trial instead). Happy Tweening!

Woohoo! I finally got it all working perfectly. I created my timeline for each section and then a scrollTrigger for each section. In each scrollTrigger I have the "animation" set to the section timeline and the toggleActions to play onEnter/onEnterBack and reset onLeave/onLeaveBack. Thanks for all of your help! const animate_01 = gsap.timeline({paused:true}) .fromTo('#section-1 .svg-wrapper', { opacity:0, scale: "1.5", }, { opacity:1, duration:0.5, ease: "none", scale: "1", delay: 0, }) .fromTo('#section-1 #title', { opacity:0 }, { opacity:1, duration:0.5, ease: "none", scale: "1", delay: 0 }) .from("#section-1 #mask-path-1", { duration: 2, drawSVG: 0, ease: "none" }) .from("#section-1 #mask-path-2", { duration: .5, drawSVG: 0, ease: "none" },">-0.05") .fromTo('#section-1 .blob-wrapper', { opacity:0, scale: ".5" }, { opacity:1, duration:0.5, ease: "back", scale: "1", delay: 0 },">-0.05") .fromTo('#section-1 .panel', { opacity:0 }, { opacity:1, duration:0.5, ease: "power1.out", y: "-=25", delay: 0 }); ScrollTrigger.create({ trigger: '#section-1', animation: animate_01, toggleActions:"play reset play reset", start: () => { return `top center`; }, end: () => { return `bottom center`; } });

Sure! So you've almost got the right idea. You're using a loop, but then you're using a global selector inside it. gsap.utils.toArray(".way-cards").forEach((container, i) => { gsap.fromTo( ".way-card", // this is global! It's grabbing all the way-cards { y: () => window.innerHeight + 100, rotate: -90, }, { y: 0, stagger: 0.5, rotate: 0, scrollTrigger: { pin: container, markers: false, scrub: true, start: "top top", end: "+=1000", invalidateOnRefresh: true } } ); }); you'll want to do this instead. Grab that scoped container. gsap.utils.toArray(".way-cards").forEach((container, i) => { gsap.from(container, { y: () => window.innerHeight + 100, rotate: -90, stagger: 0.5, scrollTrigger: { pin: container, markers: false, scrub: true, start: "top top", end: "+=1000", invalidateOnRefresh: true } }); }); You also don't need a fromTo. You can just use from, it'll automatically go 'to' your starting values. fromTo is only needed if your 'from' and 'to' values are different from where your element is set up.

Perfect, thank you. I am learning through using and looking at the code, so much appreciated help.

Welcome to the forum @agsymonds If I understand you correctly, the advanced stagger object has you covered. Does that work like you imagined? https://greensock.com/docs/v3/Staggers [I justed increased the stagger value a bit in this demo to make the randomness more apparent.] // simple ... stagger: 0.1, ... // advanced ... stagger: { each: 0.1, from: 'random' } ... https://codepen.io/akapowl/pen/NWBOxjR

@Esben Juul Mortensen You can try this solution

(Also worth mentioning again that Jack's sick so it's just the lowly mortals trying to help here)

This definitely seems like an issue with how your browser renders sub-pixels on your monitor (since it is using transforms, subpixel positioning will be present). Try a -1px margin-bottom to see if that fixes the issue. I'm not able to see the issue on my machine.

I cannot seem to edit the file (I tried forking the project, but couldn't get it to run properly), but I'm guessing you'll need to call your gsap timeline after the temp image is added to the page, otherwise gsap doesn't know what to call. Try console logging gsap.utils.toArray('.temp-image img") right after you create it, to see if you can target it at that point. if that's the case, you may need to call a function using that as a prop... something like: const animateTempImage = (tempImg) => { gsap.to(tempImg, { ... }) } animateTempImage(gsap.utils.toArray('.temp-image img'))

Yeah, that has absolutely nothing to do with GSAP. It's just browser graphics rendering stuff. Annoying, I know. In some cases, adding will-change: transform can help but I don't think it really does in this case. Offsetting your margins is probably best.

Nicely done!

I can't see this I'm afraid - steps to recreate along with the browser and OS you're on would be helpful, maybe a video too?

Perhaps the problem is that React 18 runs in "strict" mode locally by default which causes your useEffect() to get called TWICE! Very annoying. It has caused a lot of headaches for a lot of people outside the GSAP community too. .from() tweens use the CURRENT value as the destination and it renders immediately the value you set in the tween, so when it's called the first time it'd work great but if you call it twice, it ends up animating from the from value (no animation). It's not a GSAP bug - it's a logic thing. For example, let's say el.x is 0 and you do this: useEffect(() => { // what happens if this gets called twice? gsap.from(el, {x: 100}) }, []); The first time makes el.x jump immediately to 100 and start animating backwards toward the current value which is 0 (so 100 --> 0). But the second time, it would jump to 100 (same) and animate back to the current value which is now 100 (100 --> 100)! See the issue? In GSAP 3.11, we introduced a new gsap.context() feature that solves all of this for you. All you need to do is wrap your code in a context call, and then return a cleanup function that reverts things: // typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start. useLayoutEffect(() => { let ctx = gsap.context(() => { // all your GSAP animation code here }); return () => ctx.revert(); // <- cleanup! }, []); One of the React team members chimed in here if you'd like more background. We strongly recommend reading the React article at https://greensock.com/react Happy tweening!

Hi, Maybe you're not queuing your scripts properly in Wordpress? I know very little about the subject but you should check this guide and it's resources in order to see if that helps: Hopefully this helps. Happy Tweening!

You'll want to make sure your tl.current exists here... and since it's a ref, you don't need to pass it into the deps. useEffect(() => { if (!tl.current) return; isOpen ? tl.current.play() : tl.current.reverse() }, [isOpen])

Hi @Sujxl and welcome to the GreenSock forums! Please do not create duplicate threads and abide to the forums guidelines: Besides the fact that you're not passing an empty dependencies array (as @elegantseagulls already noticed), you're storing your timeline in a ref so tl is a React ref object not a GSAP object, so it doesn't have a play/reverse methods. You need to access the current value in the ref: useEffect(() => { isOpen ? tl.current.play() : tl.current.reverse() }, [isOpen, tl]) Finally I'll delete the duplicated post so we can keep track of this one in order to solve your issue. Happy Tweening!

You forgot a deps array on the useEffect that's setting up your timeline. I'm wondering if this is causing a re-render that would break the .from animation. useEffect(() => { tl.current = gsap.timeline({ paused: true }) ... }, []) It might also be helpful to use gsap's context here as well (really helpful for garbage cleanup, and using GSAP in React's strict mode): https://greensock.com/docs/v3/GSAP/gsap.context()

@Juan Llopis maybe I'm missunderstanding, but at least with my request, because there's no active item/snapping, why don't you just use different widths directly on the card element? https://codepen.io/andrei-savu/pen/BaPqzvX maybe also try to use vw units to get a perfect viewport mix. // you can then have images either as <img tag with position absolute, width 100%, height 100% and object-fit:cover, or you can use them as background-image

Hi @Juan Llopis and welcome to the GreenSock forums! This example has elements with different widths, so you can use it for inspiration: https://codepen.io/GreenSock/pen/gOvvJee If you keep having issues let us know and remember to include a minimal demo so we can have a better idea of what the problem is. Happy Tweening!

If you'll be using that approach, indeed it'll be a good idea in order to tell the pages that is OK to create the ScrollTrigger instances. Happy Tweening!

Hey @Cassie Really appreciate the help you're a hero! So i changed the names of the classes to avoid confusion. I actually want to animate this line: But of course not globally, but changing it to the way you showed just animates the container. Is the way maybe to use a loop inside the loop for every card? EDIT: I figured it out: gsap.utils.toArray(".way-cards-container").forEach((container, i) => { const cards = container.querySelectorAll(".way-card"); //loop through each .way-card within its respective container gsap.fromTo( cards, { y: () => window.innerHeight + 100, rotate: -90, }, { y: 0, stagger: 0.5, rotate: 0, scrollTrigger: { pin: container, markers: false, scrub: true, start: "top top", end: "+=1000", invalidateOnRefresh: true } } ); });

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: https://codepen.io/GreenSock/pen/aYYOdN If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.

@Skilltech Ha! When you put it like that it's so simple 😅 I'm using the Hello theme so can't do that, but you gave me an idea and adding it as custom code snippets broken into two seems to work. Nice one!

One other thing I just noticed is that you're animating the SAME element that you're pinning. That's almost always a very bad idea. Pinning requires some very specific (and sometimes complex) styling, so it's almost always a much better idea to just create a wrapper element and use that as the trigger/pin, and then animate the child itself. In other words, don't pin an element AND animate its properties with another ScrollTrigger. Once we can reproduce the problem (I still can't seem to), the issue may become more clear.

There are quite a few ways to do that. Here's one that uses an Observer to respond to wheel/touch/pointer events: https://codepen.io/GreenSock/pen/NWBLzWy?editors=0010 Is that sorta what you're looking for?

Hi, I'm working on an example for this. It's taking a bit longer than expected so please stand by. In the mean time I can tell you that you don't have any of the code regarding the panels animations and your CSS Setup is really the one you need to emulate the example you post. Happy Tweening!

Welcome to the forums, @AlexanderGS! First of all, good job using gsap.context() and doing proper cleanup in React! You must have read the article: You're actually making one of the most common mistakes - using nested ScrollTriggers. It's logically impossible for a playhead to be controlled BOTH by a parent timeline AND the scrollbar position (they could be going in completely different directions). I was actually pretty confused by what you were trying to do with your first .from() animation anyway. There's literally no animation whatsoever in it. And why are you using a 0.5 delay on the parent timeline and a 2-second delay on the 2nd from()? I wonder if you intended something more like: useLayoutEffect(() => { let ctx = gsap.context(() => { let timeline = gsap.timeline({ scrollTrigger: { trigger: `.${about.about}`, start: "top top", scrub: true, pin: true } }); timeline.from(`.${about.subtitle}`, { x: 100, opacity: 0.5, duration: 2, delay: 2 }); }); return () => ctx.revert(); }); 🤷‍♂️ Lastly, it appears as if you're using LocomotiveScroll in your CodeSandbox which is fine, but we can't really support that since it's a 3rd party (non-GreenSock) product. You'll need to wire it up using ScrollTrigger.scrollerProxy(). Or of course it'd be much simpler to just use ScrollSmoother instead (fully supported and integrated with ScrollTrigger out-of-the-box).

You have a ton of CSS in there so it's a little hard to tweak. But something like this. https://codepen.io/GreenSock/pen/MWBqKGB fyi - I wouldn't use vh on that container as the final solution, it feels a bit messy - I just couldn't add percentage height as the parent's styling also didn't have a height so it was automatically collapsed.

Hi there @Prydz - I just answered on the other thread you opened - lets keep the conversation over there to avoid confusion. Thanks!

Hi, It would be ideal in order to re-create the ScrollSmoother instance to adapt to the new content height and traverse trough the elements and see if there is any data-speed or data-lag. In that case you should check Next router for route changes in the layout component, once the content is rendered in the DOM create the ScrollSmoother instance and then the ScrollTrigger in the page content. You can leverage the same React Context for doing that in a super simple way. Let us know if you have more questions. Happy Tweening!

@Cassie I've managed to get it working. Changed package manager from yarn to npm.

Hi and welcome to the GreenSock forums, It is usually best if you provide a demo of the code you are working with so that we can get an understanding of how your elements are set up and part of the GSAP API you are familiar with. I don't think I understand all of what you are asking but the animations used to reveal the animations can be built a number of ways. I did not study the effect in depth but it appears that a black element is expanding from the left edge. it then shrinks down to the right edge while the image fades in beneath it. This can be accomplished with a sequence of 3 tweens like: var tl = new TimelineMax({repeat:3, repeatDelay:0.5}) tl.from(".cover", 1, {scaleX:0, transformOrigin:"left"}) .to(".cover", 1, {scaleX:0, transformOrigin:"right"}, "reveal") .from("img", 1, {opacity:0}, "reveal"); https://codepen.io/anon/pen/VbWXbg?editors=1010