Jump to content
Search Community

How to update Teens for Responsive Breakpoints and on browser resize

omarel 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

Because tweenMax adds inline CSS styles for tweens I'm having trouble with how the tweens look on mobile and different breakpoints. I'm trying to figure out how you can update the tween for mobile breakpoints and when the browser is resized?
 

For example here's a code pen. What if I want this tween width to go to 90% for everything below 768px as well as when the browser is resized below that breakpoint?

 

is there a "easy" way to do this. I'm worried this will get out of hand when you have many tweens on a page

 

See the Pen qgPaRm by omarel (@omarel) on CodePen

 

See the Pen qgPaRm by omarel (@omarel) on CodePen

Link to comment
Share on other sites

It depends, really. Are you thinking of a situation where someone will be resizing the window while the tween is running? Or are you thinking of a situation where the leftover styling might be the problem?

 

For the first question, there isn't really a easy simple way. You'll have to keep track of the animation, listen for the breakpoint event, save the tween progress, rebuild the tween, reposition the progress.

 

For the second, it's a tad easier. Just use clearProps in your tweens. :)

 

  • Like 2
Link to comment
Share on other sites

@dipscom, what I want to do is on less than 768px the tween should be 

TweenMax.to('.box', 1, {
    opacity:1,
    width:"100%"
})

and on higher than 768px the tween should be:

TweenMax.to('.box', 1, {
    opacity:1,
    width:"65%"
}

I'm not sure what's the best way to approach this. I'm not exactly sure which option is needed. I dont think its clearProps because I may still want the tween, but with different properties. 

Link to comment
Share on other sites

Hi, hi,

 

It was bedtime here, sorry for the long delay...

 

I think the true answer is going to be a little bit more involved than what I am going to describe now but, we better off by going step by step.

 

What you are describing on your last post is the window.matchMedia method here's a quick explanation on how to use it.

 

So you'd go like:

 

See the Pen wNPRpE by dipscom (@dipscom) on CodePen

 

Note that I added a listener to the mediaQuery, you might not want to do that in your case.

Link to comment
Share on other sites

That looks interesting. I can only see it on my phone right now. I want to see what happens on desktop and resizing the browser. 

 

But I'm wondering if we can release properties and have it retween on resizing and once it hits the desired breakpoint?

 

Overall this can surely get complicated when you have a lot of tweens. But anyone who pushes things into production knows dealing with these issues is of huge importance. 

 

I wish greensock had some more built in functionality to deal with responsive issues. 

 

Things like swiper js have properties for breakpoints. 

  • Like 1
Link to comment
Share on other sites

14 minutes ago, omarel said:

But I'm wondering if we can release properties and have it retween on resizing and once it hits the desired breakpoint?

 

I have a feeling the eventListener will take care of that for you.

 

15 minutes ago, omarel said:

I wish greensock had some more built in functionality to deal with responsive issues. 

 

It's a balance between being the best tool for one thing and being a tool that does a lot of things.

 

GSAP is more about being the most flexible/efficient tweening engine around at the expense of pre-packaged solutions.

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