Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Daniel Hult

Different timeline on mobile

Recommended Posts


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

Share this post

Link to post
Share on other sites

Hey again,

Thank you for the reply! Working great - except one thing.

If I add an eventlistener on resize to check what width it's at, the animation keeps looping after it's started. Do you know how to solve this?


I edited the codepen for you to see :)

Share this post

Link to post
Share on other sites
14 minutes ago, Daniel Hult said:

Do you know how to solve this?

You can .pause() or .invalidate() or .kill() the animations that you've started and use a resize listener to check to see if you need to do that.

Share this post

Link to post
Share on other sites

Would you be so kind to help me write that? Not sure how I would implement that

Share this post

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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.