Jump to content

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

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

Go to solution Solved by GreenSock,

Recommended Posts


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. 

Edited by nonoumasy
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.




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.