Jump to content


Tween from static flexbox context to bottom right fixed and back again

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

(No codepen yet, because I don't know where to start)


Like seen in the picture, I have a audio player.

The play-button should roll down to the bottom right and stay fixed there, once the player has left the viewport. And of course go back to its start position when the player reenters the viewport.


How would you approach this in general?





Link to comment
Share on other sites

Hi kreativzirkel,


one option could be ScrollMagic:  

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


Happy scrolling ...



Link to comment
Share on other sites

I don't have time to mock it all up for you, but I'd probably use getClientBoundingRect() in an onscroll event (perhaps throttled) to sense when it's on/off screen, and then figure out the offset from your destination (lower corner) and immediately set position:fixed and bottom: whatever as well as x/y that reflect the offsets, so that you could then animate the x/y back to 0. Visually, it'd looks seamless (at least the way I'm envisioning it in my head) :) 

Link to comment
Share on other sites

Sensing when the player is out of view is not the problem. I use jQuerys Waypoints for this.

Thing is: as soon as you set it to fixed, it jumps: I don't want it to jump. This is not a problem for going down, since the player / and the button are out of view anyway. But when you go back, the now fixed button must animate to it's former position, which.. unfortunately, is getting scrolled. So adjusting the tweens destination while scrolling is impossible I think?


I will look into the ScrollMagic thingy, although I'd rather not add yet another library bloating up my code just for one simple tween.

Link to comment
Share on other sites

The interpretation of general could be no plan.

If you use the libary waypoints no doubt about it - a good plan.

If jumping scrolling down is no problem, fine.

If jumping back should be avoided, why not skip the drive to the right.
Just fade it in and out. You can adjust the timing of play and reverse plus define a separate waypoint starting the reverse earlier.

A rough pen:  

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


I would vote for a smooth look instead of complicated calculations.
The user will scroll more or less volatile.

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.