Jump to content
GreenSock

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

On Click Tween Stops Working after Second Click

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 post
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 post
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 post
Share on other sites

Hi nmarketti,

 

With the logic of ID´s and classes you will get it:  

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

 

Happy tweening ...

 

Manfred

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

  • Like 1
Link to post
Share on other sites

This will be perfect. Thanks for all the help!

Link to post
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 post
Share on other sites

Hi nmarketti,

 

Great to hear.

 

This pen is tided up a little bit: 

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

 

CSS: header height = h2 line-height  - no need of offset
JS: some vars; TimelineMax to add and position tweens if wanted

Happy tweening ...
Manfred

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.

×