Jump to content
Search Community

Responsive tweens with function-based values

katerlouis 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

Please forgive the lack of a pen. Deadline– ...

It's gonna work like this! I promise–

 

var tl = new TimelineMax() 
	.to(elem, 1, { y: function() {
    	return $(window).height() / 100 * 50;
    } });


$(window).on("resize", function() {
  // refresh the timelines tween 
});

 

How can I force tl to execute the tweens function and therefore recalculate the y-value?

 

 

Thank you for your help!

Link to comment
Share on other sites

Well, technically you could just invalidate() the timeline/tween to force it to re-record all the starting/ending values on the next tick, but you could also just create a new tween each time and simplify it like: 

 

$(window).on("resize", function() {
  TweenMax.to(elem, 1, {y:$(window).height() / 100 * 50});
});

 

  • Like 4
Link to comment
Share on other sites

The tween I want to "responsivize" / react to resize is part of a big timeline with labels I tween to etc. pp.

 

Wouldn't invalidating completely reset the tl? I need the progress to stay at label xy or maybe even keep playing while resizing? 

 

And it is more of a general question when these function-based values update. Because if they don't I don't see the huge advantage here.

Link to comment
Share on other sites

On 12.3.2018 at 11:53 AM, Sahil said:

You can use modifiers plugin to calculate values before applying them so your tween will continue playing on resize as if nothing happened.

 

This sounds promising; I look into that.

How is the impact on performance with this technique? My instinct says it's rather heavy. I need to change a lot of tweens on resize–

Link to comment
Share on other sites

27 minutes ago, Acccent said:

wow that's a new thing isn't it! I thought variables were exclusive to preprocessors. Great!

 

Sort of new, but a variable in preprocessor doesn't work the same way because they are static and cannot be changed at runtime.

https://greensock.com/css-variables

 

And if you want to see the future, fire up Chrome and check out these experiments. Chrome needs to be version 65 or higher.

https://lab.iamvdo.me/houdini/background-properties

 

  • Like 4
Link to comment
Share on other sites

And I see some new experiments have been added. I love this one.

https://lab.iamvdo.me/houdini/random-bubbles-mask

 

EDIT: Actually, you might have to wait a couple of more versions to see that, or enable experimental web platform features in Chrome or Opera. Copy and paste this in your address bar.

 

about://flags/#enable-experimental-web-platform-features

  • Like 2
Link to comment
Share on other sites

16 minutes ago, Acccent said:

gotta find out when to use it and when to avoid it.

 

I don't know if there is a reason to avoid them. From a styling point of view they're safe to use because CSS just skips stuff it doesn't understand.

 

.foo {
  background-color: green; // fallback
  background-color: var(--myColor); 
}

 

IE is the only browser that doesn't support them, so the animation won't work, but it won't throw an error.

 

But I would just disable all the animations in IE. Don't worry, your client won't check. :D

  • Like 2
  • Haha 1
Link to comment
Share on other sites

On 24/03/2018 at 2:16 PM, OSUblake said:

I don't know if there is a reason to avoid them. From a styling point of view they're safe to use because CSS just skips stuff it doesn't understand.

 

What I meant by 'avoiding them' was more, like, when you learn about a new thing you get all excited about it and try to do everything with it – even stuff that actually doesn't need it. I can totally see myself reworking animations to add CSS variables everywhere even if they don't do anything at all to improve the animation in question. So, gotta watch myself :)

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