Jump to content
Search Community

Gsap animation on click event with scroll

DD77 test
Moderator Tag

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

:x I have this tween1 that should should work on click and then reverse in case I scroll back. 

My tween doesn't work, the click doesnt play and so the reverse doesnt work,  so:

 

-on click toggle active which will make the  f active will have tween1.reverse()

     

    //CLICK EVENT ON SECTION 2, AND WHEN SCROLLING BACK TO SECTION 1 IT SHOULD REVERT ALL

    var tween1 = new TimelineMax();
    tween1.to(".click-element", 0.3, {className: "+=active", x: 500, paused: true  }, 0)
    .to('#section-2', 0.3,{className: "+=darkblue", paused: true }, 0)

    $(".click-element").on("click", function(e) {
      $(this).toggleClass('active');
      tween1.play();
    });

    var scene1 = new ScrollMagic.Scene({
      triggerElement: "#section-2",
      offset: 50
    })
    .on("leave", function() {
      tween1.reverse();
    })
      .setClassToggle("body", "darkblue")
      .addTo(controller); 

 

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

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