scrolltrigger Target for scrolltrigger

[Akash Ranjan 4 Likes (Newbie)]

Hi,

 

Is there any way to target another element for adding class while the trigger elements enters and exits viewport. Like a target prop or something.

 

Or just add animation to another set of images.

 

In the below code I am trying to add "active" class to the target element ".anim-phone-image" but i guess there is no such property 😅.

 

Please help me out

 

  useEffect(() => {
    const scrollTexts = gsap.utils.toArray('.anim-text');

    scrollTexts.forEach((item, index) => {
      tl.current = gsap.timeline({
        scrollTrigger: {
          trigger: item,
          scrub: true,
          start: 'top 30%', // start when top of trigger target hits 50% point of viewport
          end: 'bottom 10%',
          toggleClass: `active-${index}`,          
          markers: true,
          target: '.anim-phone-image',
        },
      });
    
    });
  }, []);

 

[Cassie 3,980 Likes (Superhero)]

Heya - from the ScrollTrigger docs.

 

toggleClass

String | Object - Adds/removes a class to an element (or multiple elements) when the ScrollTrigger toggles active/inactive. It can be either of the following: String - The name of the class to add to the trigger element, like toggleClass: "active" Object - To toggle a class for elements other than just the trigger, use the object syntax like toggleClass: {targets: ".my-selector", className: "active"}. The "targets" can be selector text, a direct reference to an element, or an Array of elements.

Hope this helps!

[Akash Ranjan 4 Likes (Newbie)]

Hi @Cassie,

 

Thanks for this I figured this out after posting in the forum 🤦‍♂️. Although I am struggling to keep the last class added in the target.

 

For example if the last element passes from its view port its class also gets removed but i want that last class to stay. Can you please help me with that.

 

Thanks again

[Cassie 3,980 Likes (Superhero)]

Sure thing!

So if you want the behaviour to be different from the default - you probably need to use callbacks instead.
 

Quote

Note that toggleActions don't apply to toggleClass. To have toggle class names in a different way, use the callback functions (onEnter, onLeave, onLeaveBack, and onEnterBack).

 

See the Pen qBdeVJY by GreenSock (@GreenSock) on CodePen

 

You can add and remove classes in JS using classList 
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

 

If you need more help -  try and give it a go and post a minimal demo of what you've attempted.

No need to include your whole project, just a few coloured divs with the least styling possible to show your solution.