Jump to content
GreenSock

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

ScrollTrigger: toggleClass with object don't work

Recommended Posts

If I want to toggle a class on another object, the class "undefined" is set instead of the one I want.

Here the example: 

See the Pen WNrNNap by alsodenn (@alsodenn) on CodePen

  • Thanks 1
Link to post
Share on other sites

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

 

Link to post
Share on other sites

@Violetta,

 

This does appear to be a bug when passing in an object to toggleClass.

Link to post
Share on other sites

I'm so sorry about that - it was just a typo in the docs. It's "className", not "class". 

 

toggleClass: {targets: ".c, .a", className: "active"}

 

  • Like 6
Link to post
Share on other sites

Now it works! Thanks for the quick response :-).

  • Like 1
Link to post
Share on other sites

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

Link to post
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 post
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.

×