Update default values on resize (ScrollMagic/GSAP)

[Kenjee]

Hi guys,

 

I'm struggling with some responsive animation here.

I try to get a sample of my code for demo, let me know if it's ok.

 

I have some elements positioned with translate CSS and i tween them with ScrollMagic. It works fine.

 

BUT... now i try to implement a responsive mode where i have media query in my CSS that change the default translate et in my JS, i have a resize event that try to re-render my controller with the updated scene.

 

Here what i would it to do when i try to resize :

- Use the new tween (updated xVal based on window width)

- Get default translate value based on media query

 

Thanks for helping! :-)

See the Pen RwPONVZ by kenjeegrondin (@kenjeegrondin) on CodePen

[ZachSaucier]

Hey Kenjee and welcome. 

 

Anytime you set styles on an element directly via JS, those styles will be applied inline and be applied over your CSS styles (unless you use !important which should be avoided). As such, your styles applied in the media query that have already been set via JS won't do anything.

 

What you should do instead is detect if the threshold you have has been crossed by using a resize event listener. If it has, you can destroy the old animation, reset any properties (optionally to new values that you have set), and recreate the animation. 

 

There are a lot of threads on this forum that talk about doing so. Here are some of the ones that I think will help you understand the concepts the most:

 

With all of that being said, Scroll Magic is not a GreenSock product and we don't really recommend using it. You can do the same thing without it. Here's a basic example of how to do so:

See the Pen dyoOgYj by GreenSock (@GreenSock) on CodePen

[OSUblake]

Use media queries for media queries, not resize events.

 

An oldie using jQuery, but not necessary.

 

See the Pen vExQEy by osublake (@osublake) on CodePen

 

This has resize events, but for a different reason. The background color changes on media changes.

 

See the Pen jLLqbY by osublake (@osublake) on CodePen

 

 

 

 

 

[Kenjee]

Thanks, i will look into it and try some ajustments. I will let you know.

[Kenjee]

Alright, it's not perfect yet, but i build a scrollmagic like (bye ScrollMagic!) from the example you gave me @ZachSaucier and i adapt some code of the second codepen you share @OSUblake 

 

For now, my code is not changing value on resize but the way i have done it, the default value change because it's base on a percentage.

In my current project, this will do the work but i will continue to develop this!

 

Thanks for helping.