Figo

Thanks @elegantseagulls you just made my day! @Cassie and yourself are rockstars for responding.

Thanks @elegantseagulls . Noted , thanks now I know reversing is only for single animation. Having toggleActions on "play none none play" is still giving me the same problem once the user scrolls up. Is there a way to play scroll animation when the user scrolls down and then reversing the animation when the user scrolls up with gsap?

Thanks @Cassie, appreciate the response! Nice proposal. Unfortunately in my React app the entire list goes half way up when the second section enters viewport and in the last section it shoots straight up above the border box. I'm trying to troubleshoot why it's doing it with this proposal. Silly question but if the sections have different heights will this still work? I've given all my sections (components) the same classname as the codepen but I'm not sure why the list is not aligning correctly with the borderbox. I wonder if this variable: let percentageShift = 100 / sections length , is effecting it, as I do have other components that's animating in and out of my homepage plus a navbar (but they do have different classnames though). I'm trying to do something similar to this section indicator by using Gsap and Scrolltrigger (bottom left corner when you scroll)

I'm using scrollTrigger to animate an object when an other object enters into the viewport. It works all fine when I scroll down but when I scroll up (with reverse in my toggleActions) it seems to "jump". Here is a demo I created to better demonstrate what I'm trying to achieve. Link to codesandbox =>: https://codesandbox.io/s/icy-bash-180e8?file=/src/App.js Apologies if the codesandbox demo seems jumpy (not sure why) but in my actual project it is lot smoother, until I scroll up and want the animation to reverse. It goes straight from the last <li> in my list to the first <li> . In other words from the fourth <li> straight to the first <li>. What I'm trying to achieve in the demo is when I scroll down and section02 enters the viewport my list moves up (y:-35), when section03 enters viewport my list moves up (y:-70) etc. and vice versa for scrolling up. Here is also a snippet of my code as well: import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); useEffect(() => { gsap.to('.list', { scrollTrigger: { trigger: ".section02", toggleActions: "play pause pause reverse", //markers: true }, y: -35, ease: "none", }); gsap.to('.list', { scrollTrigger: { trigger: ".section03", toggleActions: "play pause pause reverse", //markers: true }, y: -70, ease: "none", }); gsap.to('.list', { scrollTrigger: { trigger: ".section04", toggleActions: "play none none reverse", //markers: true }, y: -105, ease: "none", }); },[]); What am I doing wrong, any advise would be super appreciated.

Regardless I managed to create the desired effect, thanks to you Jack useEffect(() => { gsap.from([headlineFirst, headlineSecond , contentP], { y: (i, target) => { return target.classList.contains("contentP") ? 20 : 49; }, opacity: (i, target) => { return target.classList.contains("contentP") ? 0 : 1; }, duration: 1, ease: Power3.easeOut, stagger: 0.3, scrollTrigger: { trigger: ".aboutV2", start: "10% 100%", markers: true, toggleActions: "play none none pause" } }); }, []);

Thank you Jack for your thorough explanation and taking the time to respond and providing solutions. I just need to learn more about function-based values for writing it in a single tween. I do understand the function part e.g. " ()=>{ } " and the ternary operator at the end but will do some self-educating on the "target.classList.contains" part. Anyway what i was trying to point out, is if you write two separate tweens, and "fake" the stagger effect by giving one of the tweens a "delay", scrollTrigger ignores the delay. Here is your example with one of the tweens having a delay of 1000. Link=> https://codesandbox.io/s/zen-dew-fr0xv?file=/src/App.js For example if run your code above, but changed the delay to be more noticeable, does the delay or opacity work on your side? useEffect(() => { gsap.from([headlineFirst, headlineSecond], { y: 49, duration: 1, stagger: 0.2, scrollTrigger: { trigger: ".trigger-container", start: "20% 100%", markers: true, toggleActions: "play none none none" } }); gsap.from(contentP, { y: 20, duration: 1, delay: 1000, opacity:0, scrollTrigger: { trigger: ".trigger-container", start: "20% 100%", markers: true, toggleActions: "play none none none" } }); }, []);

No ideally I want one useEffect, but in that sample I want to give the "contentP" different animation values. For example "HeadlineFirst" and "HeadlineSecond" starts from y:49, but I want "contentP" to start from y:20 as an example. Or what if I wanted to "contentP" to start from opacity:0, but not for "HeadlineFirst" and "HeadlineSecond". Writing two useEffects won't work because they start at the same time, not giving the stagger effect.

I can probably just write the animation twice for the other div to have it's own values, but would be neat if I could combine them. useEffect(() => { gsap.from([headlineFirst, headlineSecond, contentP], { y: 49, duration: 1, stagger: 0.2, scrollTrigger: { trigger: ".trigger-container", start: "20% 100%", markers: true, toggleActions: "play none none none" } }); }, []); useEffect(() => { gsap.from(contentP, { y: 20, duration: 1, opacity:0, stagger: 0.2, scrollTrigger: { trigger: ".trigger-container", start: "20% 100%", markers: true, toggleActions: "play none none none" } }); }, []);

James you are a legend! I'm 99% there. If you don't mind me asking you, in that example in number 3, if I had to give the "contentP", different values for the animation, would it be possible? Still the same trigger Here is an example but running into a syntax error: useEffect(() => { gsap.from([headlineFirst, headlineSecond, contentP], { y: 49, duration: 1, stagger: 0.2, scrollTrigger: { trigger: ".trigger-container", start: "20% 100%", markers: true, toggleActions: "restart none none none" }.from(contentP, 1, { y: 20, opacity: 0 } }) }, []);

Amazing thanks for the swift response from both of you, Jack i will give your suggestions a go (and thanks for the advice)

I have tried to different methods for creating a stagger animation with scrollTrigger, is this possible thought with GSAP (in ReactJS) ? What I'm trying to achieve, is to have a headline animate, followed by a second headline, follow by p text once the user scrolls into the trigger. In this method, GSAP ignores "delay": LINK TO CODESANDBOX => https://codesandbox.io/s/winter-bush-z0qbu?file=/src/App.js Here is another method where I use staggerFrom, but as soon as I add scrollTrigger to the animation it doesn't work: LINK TO CODESANDBOX (without scrollTrigger) => https://codesandbox.io/s/great-goldberg-ivkf6?file=/src/App.js LINK TO CODESANDBOX (with scrollTrigger) =>https://codesandbox.io/s/icy-bash-180e8?file=/src/App.js Any advice would be super appreciated

I also realised that Sketch App is not great for exporting svgs as it creates multiple paths (which I use for my designs). Apologies as this has been throwing me off a bit. A fix for this is to use Adobe Illustrator which apparently has an compound path option. Thought I would leave this in the topic if anyone in the future experiences the same

Thanks for all the great feedback, you guys are rockstars. I did however include a working sample but maybe it's only accessible to myself? Here is the working sample => https://codesandbox.io/s/relaxed-shadow-93y4e?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js I'm trying morph the phone.svg to the macbook.svg, that's all. However thank you so much for the feedback, I'm sure with all the advice provided, I'll be able to get it right from here. Have a great day everybody!

Thanks @Rodrigo, I really appreciate your response so much man. Can my svgs have multiple paths, e.g. d= "...." d="..."? I read somewhere on the forums that @OSUblake mentions that you need to convert svgs to path, so mine has multiple "d=" per svg when I convert them. I left the original svgs in the codesandbox under assets, but did covert them. https://codesandbox.io/s/relaxed-shadow-93y4e?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js

Cool I've created the codesandbox earlier so fingers crossed for a response. Or if anyone has a link to a morphSVG done in a React JS in a codesandbox or tutorial or video it would be super appreciated.