Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
nonoumasy

How to target different elements from within a React ref with GSAP scrollTrigger

Go to solution Solved by GreenSock,

Recommended Posts

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 by nonoumasy
clarification
Link to comment
Share on other sites

  • nonoumasy changed the title to How to target different elements from within a React ref with GSAP scrollTrigger
  • Solution

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

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.
😀

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×