Jump to content
Search Community

Target for scrolltrigger

Akash Ranjan test
Moderator Tag

Recommended Posts

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',
        },
      });
    
    });
  }, []);

 

Link to comment
Share on other sites

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!
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

  • Like 2
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.
×
×
  • Create New...