Jump to content
GreenSock

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

How to update Teens for Responsive Breakpoints and on browser resize

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. 

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

@Dipscom Just wanted to say thank you! I've played with this and I'm getting it.

 

It is going to be quite tedious when doing a lot of tweens for a production environment where it needs to work properly on every possible device, but I'm happy there's a solution!

  • Like 2
Link to comment
Share on other sites

Nice one. Maybe you will come up with a way to run your tweens from a function and give parameters based on the container size to help reduce your repetition.

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