Jump to content
GreenSock

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

Responsive tweens with function-based values

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

You can use modifiers plugin to calculate values before applying them so your tween will continue playing on resize as if nothing happened. Though if your current tween inside the timeline is not active then you will have to manually set it's position on resize.

 

 

See the Pen eMNopW?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

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

Getting the window size inside a modifiers function isn't going to help improve performance.

 

$(window).height()

 

jQuery or not, it's still requesting the current window size. See what forces a layout.

https://gist.github.com/paulirish/5d52fb081b3570c81e3a

 

The window size should be stored in a variable.

  • Like 4
Link to comment
Share on other sites

Here's a demo I made with CSS vars. The --x and --y values are in vw/vh units, so it will be responsive.

 

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

 

 

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Great demo, Blake. Very clever and cool!

Link to comment
Share on other sites

Thanks!

 

It should be noted that animating CSS variables like that just changes the inline style, so it will work with multiple elements.

 

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

 

 

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Really nice, Blake! 

  • Thanks 1
Link to comment
Share on other sites

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

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

!!! this is a whole new thing to learn – gotta find out when to use it and when to avoid it. A whole new world of possibilities! Exciting :)

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

2 hours ago, OSUblake said:

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

 

If someone is using IE, this is how you respond.

 

 

  • Haha 3
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.
×