Jump to content
Search Community

On Click Tween Stops Working after Second Click

nmarketti test
Moderator Tag

Go to solution Solved by mikel,

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'm working on a single page design that when I click between the NAV items in a dropdown menu, it tweens all the headers to a new name that are lists. I'm having an issue with Tweens on a click.

 

The codepen has the current example. 

 

1. If you click "clients", it Tweens the top header down and clients appears

2. If you click "profile", it Tweens the top header back and the default Name appears

3. If you keep clicking between the two, it still moves back and forth, but it loses it's Easing effect.

 

I'm trying to do this between four headers, but I was just trying to get the initial setup here.

See the Pen eWzwWm by nmarketti (@nmarketti) on CodePen

Link to comment
Share on other sites

Hi nmarketti,

 

Welcome to GreenSock Forums.

 

For your purpose GreenSock has the wonderfull ScrollToPlugin: https://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/

 

You can scroll the window and/or the content of a div - here srcolling a div: 

See the Pen PmmRmP by mikeK (@mikeK) on CodePen

 

Just play arround with pen ...

 

In your pen you could try (?) to reverse the other tween in the click function:  

See the Pen GmmGRG by mikeK (@mikeK) on CodePen

 

Happy tweening
Manfred

Link to comment
Share on other sites

HI Mikel,

 

Thanks for that snippet, was very helpful.

 

What I'm trying to achieve is a single page experience, where as you click on a nav item it swaps the header labels as so...and fades in the center content (#4)

 

I was able to use that code snippet to get the top header(#1) moving between labels correctly, but the side labels (#2 and #3) were not swapping.

 

Any thoughts? Screenshot attached

post-50179-0-57269200-1493678606_thumb.jpg

Link to comment
Share on other sites

HI Mikel,

 

Excellent...I have it working. But for some reason the rotated 90 degree areas are moving at snail pace. They move on click, but I can only get the next "h2" into position after clicking like 20 times. I'll keep looking into this.

 

Cheers,

Nolan

Link to comment
Share on other sites

  • Solution

Hi nmarketti,

 

Sorry, I did not checked the rotated version.

 

Using scrollTo I can not find a solution.

 

But I have an alternative: The header RECT has now an INNER which on click is set to Zero first
and than to the related position y:"-50" * (index) + "px":  

See the Pen ZKyRbz by mikeK (@mikeK) on CodePen

 

A small deficit: Going back to BLUE is not elastic.

 

You could use this alternative for all headers if that is ok.

 

Best regards
Manfred

  • Like 1
Link to comment
Share on other sites

Hi nmarketti,

 

Sorry, I did not checked the rotated version.

 

Using scrollTo I can not find a solution.

 

But I have an alternative: The header RECT has now an INNER which on click is set to Zero first

and than to the related position y:"-50" * (index) + "px":  

See the Pen ZKyRbz by mikeK (@mikeK) on CodePen

 

A small deficit: Going back to BLUE is not elastic.

 

You could use this alternative for all headers if that is ok.

 

Best regards

Manfred

Update: 

 

In my case I was able to solve this by removing

 

      TweenLite.to("#rect .inner", 0, {y:"0px"}); // first set to 0
 
All works both easing both ways. Just had to tweak the position settings a tad.

 

Thanks again!

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