nonoumasy Posted October 24, 2021 Share Posted October 24, 2021 (edited) https://codesandbox.io/s/gsap-story-with-text-yhb9w I'm revealing each card one by one using scrollTrigger. Sometimes I would like to render different elements from a .map one after another instead of the same time. I would like to have a different animation for each one, eg image, title, description. However, I only have access to the 'item' object which the ref contains. How would I seperate these? I tried destructuring the object but that didn't work. I also tried combining item with 'div' and other combinations. Cheers and thanks in advance for any help. n Edited October 24, 2021 by nonoumasy clarification Link to comment Share on other sites More sharing options...
Solution GreenSock Posted October 24, 2021 Solution Share Posted October 24, 2021 I assume you had something like this in mind?: itemsRef.current.map((item, index) => { let tl = gsap.timeline({ scrollTrigger: { trigger: item, start: "top center+=150", end: "top 50%", scrub: 1 // markers: true, } }); tl.fromTo(item, { autoAlpha: 0, clipPath: "polygon(0 0, 0% 0, 0% 100%, 0 100%)" }, { duration: 1, autoAlpha: 1, ease: "power2", clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)" } ); tl.fromTo(item.querySelectorAll("div"), {x: 100, autoAlpha: 0}, { x: 0, autoAlpha: 1, duration: 1, stagger: 0.3 }) }); Just use a timeline and then you can animate things in whatever way you want, apply staggers, etc. Put the ScrollTrigger on the timeline. https://codesandbox.io/s/gsap-story-with-text-forked-vqz4e Does that clear things up? Link to comment Share on other sites More sharing options...
nonoumasy Posted October 24, 2021 Author Share Posted October 24, 2021 Yes! Thank you so much. I was missing the 'querySelector' as a way to reference the elements I wanted to animate. Also, yes the timeline is much cleaner to work with. I have refactored my code and updated the CSB.😀 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now