Jump to content
Search Community

Different timeline on mobile

Daniel Hult 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

Hi!

As you can see in the codepen, I have a section with an image and some info text on the side. When you click the button, the image will go from 50% width to 100% and the grayscale will be removed (image will get color). You also get scrolled to a section a below it with some hidden content - and there you can reverse the timeline.

If you resize the browser, you see that the image and text in the top stack on top of each other. At this browser width (phone) I don't want the image to resize when the timeline is run - only the filter/grayscale to happen and the scrolling. So my question is - how do I go about making one timeline for desktop and one for mobile? Do I have to copy/paste the code and remove the one I don't need?

Hope this was clear! Thanks!

See the Pen YzKxyOj by daniel-hult (@daniel-hult) on CodePen

Link to comment
Share on other sites

In pseudo code:

  • Check what sizing it is at initially. Setup your animations that you need for that size. 
  • On resize, check to see if it crosses one of the sizing boundaries that you have (i.e. smaller, larger, etc.). If it hasn't, do nothing. If it has crossed one of those values, stop/kill/pause the old animations and setup any new ones that you need. 

Make sense? 

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