Jump to content
GreenSock

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

Gsap adding class reverting class using scrollMagic

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I need a click event on (section-2) which will do the following:


- Page body changes background colour (adding class="darkerblue").
- The main element (clickable) to move across x:500, scale:1.5.

- if I click the main element it will revert all.

-If I scrollback to previous scene(section-1) it will revert all.


From line 93, where I started making the scene for section-2
 

 

 

See the Pen WdvWMd?editors=1010 by davide77 (@davide77) on CodePen

Link to comment
Share on other sites

This honestly feels like I am reading an email from client :D

 

Can you please visit examples page on scrollmagic site? There are plenty of examples that show how different things can be done. Many times I just visit there and post my answers. I also had told you that you will need addIndicators plugin shows you indicator, without it it was just throwing errors in console.

 

With scrollmagic's setTween method you can pass any tween or timeline to it, there is nothing more complex than that. So you can set up a TweenMax tween or timeline and it will animate it. Hope that helps?

 

See the Pen QabRKz?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 1
  • Haha 1
Link to comment
Share on other sites

@Sahil lol sorry I know:-) 
I'm a bit under pressure as I need to sort this functionality out. I made this so far, but looks like the .click-element is already taking the tween1 .
I using alt scrollmagic site but this functionality is a bit tricky.

See the Pen WdvWMd?editors=1010 by davide77 (@davide77) on CodePen

Link to comment
Share on other sites

In that case you can use timeline, use position parameter as 0 on both tweens so you can animate multiple tweens at once.

 

See the Pen QabRKz?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 1
Link to comment
Share on other sites

@Sahil thanks, nearly there, that helps a lot. I need it on click, AND if I scroll back animation reverse. is it possible?

Link to comment
Share on other sites

It already reverses. For scroll use scrollTo plugin instead.

Link to comment
Share on other sites

But on click it should reverse the animation, looks like it jumps. I've added but doesn't work. Also the animation should be triggered only by the click event, is just when I scroll back that is revesing.....:-(

 

    $(".click-element").on("click", function(e) {
      e.preventDefault;
      console.log('click')
     $('.click-element').addClass('active');
      
      if($('.click-element').hasClass('active')){
         $('.click-element').removeClass('active');
        tween1.play();
        
      }else{ 
        $('.click-element').addClass('active')
        tween1.reverse();
      }
    });



See the Pen PEqvvX by davide77 (@davide77) on CodePen

Link to comment
Share on other sites

Hello @DD77

 

Keep in mind that even though ScrollMagic uses GSAP as its animation platform. Scrollmagic is not made by GreenSock. So any ScrollMagic specific questions should be directed to the ScrollMagic Issues Git page. So just keep that in mind that the GSAP forum has to stay focused on the GSAP API.

 

Happy Tweening :)

  • Like 3
Link to comment
Share on other sites

It was jumping because you weren't using e.preventDefault() and you can just scroll using scrollTo plugin. Reverting tween won't scroll your animation.

 

As Jonathan said, I don't want to break any forum rules. Generally we don't provide such solutions and other forum members prefer to get questions with limited demo and specific problem. I don't want to go against the usual rules though I think I have helped you enough. All the best.

 

See the Pen GyJbPK?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 4
Link to comment
Share on other sites

@Sahil I appreciate there are roles for the forum, but in this case Gsap is the protagonist here.
Specially on this function. I think I didn't explain myself properly.

 

If you look at my demo, the click event should do the animation, and not scrollMagic. So this is GSAP. but yes, I need a to revert the animation once I scroll back, only if the animation is started... Does it make sense? 

 

See the Pen PEqvvX?editors=1010 by davide77 (@davide77) on CodePen




Thank you for all your help. 

Link to comment
Share on other sites

Hi DD77

 

I've seen literally a dozen or more posts about this pen you forked from GrayGhost Visuals which is a just a basic tutorial on using ScrollMagic.

Sahil has gone above and beyond the call of duty in trying to explain how to get certain things accomplished with GSAP. It is not the purpose of these forums to spend hours helping with each new requirement a user has on a project, especially those requiring complex logic and re-wiring of animations that have already been fed into ScrollMagic.

 

I've read this thread a few times and I personally do not know enough about ScrollMagic to solve your issue. The reality is there are a lot of users who need our help (which we offer for free) and we have to do our best to help people with issues related directly to the GSAP API, anything beyond that is a bonus. 

 

I hope you continue to enjoy using GSAP and wish you good luck with your project.

 

 

 

 

 

 

  • Like 4
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.
×