heldrida

Upgrading to Webpack 2.2 from Webpack 1 and found the same issue. Thanks for sharing the fix @Torrfura

In my previous projects, I'm loading TimelineLite, TweenLite & the CSSPlugin from cdnjs through a <script> tag; Let's say I'm was using webpack. If I import these in the entry js file, would it load all the goodies and would that work? I'll test it.

Hi,

I'd like to know how to import the Easing package when using ES6? Or any other for that matter.

At the moment I noticed that even though I did not import easing, it's available when importing TweenLite. So, I'd like to understand what I'm importing and when I have to import (a package, or the need to be specific).
 

import { TweenLite } from "gsap";
TweenLite.fromTo(this.refs.logo, 0.8, { opacity: 0, x: 50 }, { opacity: 1, x: 0, ease: Bounce.easeOut })

I think your solution works, sorry had to reply quickly in the console so just did a quick test, need to check it properly

TweenLite.fromTo(myTimeline, 1, { time:0 }, { time: 0.5, onComplete: function () { myTimeline.pause() } })

Did a few more tests in the console and seems to be a good solution, here's the tested code:
 

TweenLite.fromTo(myTimeline, 1, { time: myTimeline.progress() }, { time: 1, onComplete: function () { myTimeline.pause() } })

@diaco thanks for replying!

I had to edit my question, noticed I didn't mention Timeline.

Ideally to work with a timeline, because I'm starting by declaring the animation, then depending on the user action I'd like to show the animation.
Let's say, that the user is selecting a size and there's an object that will animate according to the user input value / preferred size.

What I usually do is using the requestion animation frame and controlling the transition or input value in the call .progress(), so I can see it animating in any direction.

Do you know if there's a way to do it with a timeline? I guess that your solution can work for me, but I'd have to declare it everytime
 

Hi

I'm wondering if there's a way to play to a given X time (timeline) ?

The only way I see I can accomplish this, is by using request animation frame and call the progress method.

I found about .gotoAndStop() but it's similar to seek and it doesn't play the animation until X value (jumps straight to X point)

I'm now going to try to see at what time the animation is and for each step check if it's X time and stop or pause the animation.

But would be much easier to have something like playTo (0 start 0.5 middle and 1 end)

Any hint is appreciated!



 

Thanks guys!

So embarassing, I've failed testing this, I was sure centring margin 0 auto didn't work for some reason.

Hi,

Using GSAP TimelineMax for a 360 rotate loop animation; On window resize, I can't seem to keep the element centred;  I've got a live link here

If the page is refreshed, the instance when initialised at that point, has the element aligned properly. Only on window is resized, it breaks;

So, I've tried to use the method "kill()" and also setAttribute style and removed any css styles from there; create a new instance, but it breaks, making the animation super slow;

I wonder if there's a solution for this. Any tip is appreciated! Thanks!

See the Pen wGBBmm by helderoliveira (@helderoliveira) on CodePen