Jump to content
Search Community

ScrollTrigger: toggleClass with object don't work

Violetta test
Moderator Tag

Recommended Posts

still new to this myself but here is a script i did to toggle a class on enter and leave of the target object to add/remove a class. Hope it helps:

 

$(".test").each(function() {
    // Content Reveal Animation
    ScrollTrigger.create({
      trigger: ".test",
      start: "top 80%",
      end: "bottom 100px",
      onEnter: () => $(this).addClass('revealed'),
      onLeave: () => $(this).removeClass('revealed'),
      onEnterBack: () => $(this).addClass('revealed'),
      onLeaveBack: () => $(this).removeClass('revealed'),
    });
  });

 

  • Like 1
Link to comment
Share on other sites

  • 4 months later...

Hi!

Few questions:

1) What if I want to add different classes to each target? for example set .leave to .box1 and .active to .box2 and .hide to .box3

2) If I want the toggled class to stay on scrolled pass the trigger, I've read that is what onEnter, onLeave, onEnterBack, onLeaveBack is for and not the toggleClass, but don't know how to use it.

3) Is it better to create a timeline and add the effects on GSAP instead of creating CSS classes?

 

I had this made with ScrollMagic but want to switch to GSAP's ScrollTriger.

This is where I'm at 

See the Pen XWKdxZR by esadrian (@esadrian) on CodePen

 

 

Link to comment
Share on other sites

24 minutes ago, heyitsA said:

What if I want to add different classes to each target? for example set .leave to .box1 and .active to .box2 and .hide to .box3

Use the callbacks to apply whatever classes you want to whatever elements you want.

 

25 minutes ago, heyitsA said:

onEnter, onLeave, onEnterBack, onLeaveBack is for and not the toggleClass, but don't know how to use it.

The docs are great for learning how to use things :) In this case you might want to add the class in the onEnter and remove the class in the onLeaveBack (if you want the effect to play again the next time - if you don't want that just use once: true).

 

27 minutes ago, heyitsA said:

Is it better to create a timeline and add the effects on GSAP instead of creating CSS classes?

Usually I opt for actual animations instead of toggling CSS classes but for certain things it might make sense to use classes. 

  • Like 1
Link to comment
Share on other sites

Thanks for the response, Zach.

I gathered every toggle in a new function and called it onEnter and onLeaveBack. I was also missing .classList on the toggle and got wrong onEnter: () => function() { instead of onEnter: () => {.

I did read the docs before posting, but my understanding was not that great with the example shown :( .

At least I finally got it right! haha

See the Pen RwRavdd by esadrian (@esadrian) on CodePen

 

 

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