BradLee

Trying to use 2 timelines to translate an object (this is an abstraction from a much larger code base). I don't understand why the object won't move back and forward.

Codepen is below. I'm not sure how 'isActive' is supposed to work as it will return true, irrelevant of whether the tween is finished or not in this example. I tried using the function 'invalidate()' to reset values but had to remove it as it was freezing the browser.

I have a button which starts an animation. What I want to do is restart the animation if the user pushes the button during an existing animation. The code below just stops the tween for a split second then continues the existing animation. myTween = TweenLite.to( circle, 1, { opacity: 0, attr: { r: 12, }, ease: Power2.easeIn, onStart: reset, onComplete: reset, onOverwrite: () => myTween .restart() } )

Cjke, thanks for the reply but I don't think that is right. When Webpack bundles all the js it will look for all the dependencies. If a dependency is included via a CDN it can't 'see it' and will throw an error. I think the only way to get around it is via the webpack.config file where you can say 'ignore this dependency' as it is included via a CDN and will work during runtime.

Is there a way of using CDN's without having access to the webpack.config file? I'm using facebook's create-react-app.

I used the CDN method, thanks for the advice.

Hey guys, I'm having trouble trying to import scrollToPlugin via webpack. This is the error I'm getting - Error in ./~/gsap/src/uncompressed/plugins/ScrollToPlugin.js Module not found: 'TweenLite' I've read in other posts that you modify the webpack.config file to resolve this however I'm using create-react-app and don't have access to the config file. Does anyone know a way around this?

When I tween 1 color to another, using rgba, it's alpha value gets set to a 6 decimal number, not a 2 decimal number that I specified. Example: I specify a tween to this color: rgba(0, 0, 0, 0.38) the color that actual gets set: rgba(0, 0, 0, 0.380392) This causes a problem when I'm comparing colors in IF statements. Does anyone know who to stop this from happening?

I have 2 functions, each returns a TimelineLite instance. I have another timeline that is made up of these 2 returned timelines. The problem I'm having is the master timeline is not firing the returned timelines in sequence, they both fire immediately. Any ideas why? <div></div> div { width: 100px; height: 100px; background: tomato; } let div = document.querySelector(`div`); let tl = new TimelineLite(); let move = () => { let tl = new TimelineLite(); return tl.to(div, 1, {x: `100px`}); }; let changeColor = () => { let tl = new TimelineLite(); return tl.set(div, {background: `blue`}); }; tl.add(move()) .add(changeColor());

thanks mate, big help.. Just for future reference, to use invalidate property, would I need to save the tween to a variable then call 'invalidate()' on that variable when the tween completed? Like: var myTween = TweenLite.to ..... onComplete = myTween.invalidate();

Can anyone see why this isn't working? I push a button to translate a div to the right, then invalidate the tween and reset the translation to 0 via div's style property. My assumption is that doing these 2 things should reset the div's transform. However, when I run the tween again it doesn't act properly (the div jumps instead of animating). <button>push</button> <div></div> div { width: 100px; height: 100px; background: tomato; display: inline-block; } let div = document.querySelector(`div`); let btn = document.querySelector(`button`); const move = () => { const onComplete = () => { div.style.transform = `translateX(0)`; }; TweenLite.to(div, 1, {x: 100, onComplete}).invalidate(); }; btn.addEventListener(`click`, () => move());

Is there a way to capture the element(s) being tweened within the onComplete param? For example, I'm trying to replace the code: 'element I'm tweening here' with the actual element that is being tweened. let div = document.querySelector(`div`); TweenLite.to(div, 2, {x:100, onComplete: () => console.log(`element I'm tweening here`)});

Is there a way to change an aria property (i.e. aria-hidden: false) using gsap. I tried to attribute plugin but that is only for numeric values.

yeah, thanks mate

sorry I didn't explain my situation the best. What I'm trying to do is animate an object from off screen to the center of the screen. What I have is - // original position (the element is off screen) - .myElem { position: absolute; left: 50%; transform: translate(-50%, -50%); top: -50%; } //then I animate - TweenLite.to(card, time, { top: `50%` }); So my question is how can I get the element to tween to the center of the screen without using 'top'

Hey all, I've managed to center an element (vertically) on the screen using the following - TweenLite.to(card, time, { top: `-50%`, yPercent: '-50%' }); I have read however that animating an element using 'top' and 'left' are ill-advised as they don't use graphics card acceleration and that you should always try and use transforms instead, such as x and y. Anyone know a way to center an element without using 'top'.

Thanks Blake. My problem was trying to use a timeline when I should have been using a simple tween like you did in your example. Helpful as always.

I'm trying to always have a div start at the left edge or right edge of another div, then move to the center. The issues I'm having are - • you can't have the same animation run twice in a row, you have to alternate between left and right * after the initial animation, each following animation start at a distance from greater than the value of 'from' in the 'fromTo' timeline. Any ideas? <div class="outer"> <div class="inner"></div> </div> .outer { background-color: tomato; width: 400px; height: 300px; position: relative; } .inner { background-color: black; width: 100%; height: 30px; position: absolute; top: 50px; left: 0; } let one = document.querySelector(`.one`), two = document.querySelector(`.two`), three = document.querySelector(`.three`), four = document.querySelector(`.four`), div = document.querySelector(`.inner`); one.addEventListener(`click`, () => { let tl = new TimelineLite({paused: true}); tl.fromTo(div, 2, {left: `-100%`}, {x: `100%`}) .play(); }); two.addEventListener(`click`, () => { let tl = new TimelineLite({paused: true}); tl.fromTo(div, 2, {left: `100%`}, {x: `-100%`}) .play(); });

Hi all, I'm using timelineLite to control hover animations. What I'm trying to do is play an animation on mouseover, and a different on mouseout. Before each animation plays, I check if there is already an animation playing and kill it. In my code each animation will run once but not again after that. I think it's because their playheads aren't returning to the start but that is why I'm using .invalidate();

Hey all, My specific question is - is there a way to declare an onComplete() without attaching it to a tween in a timeline. For example, I have: tl.to(btn, timing, {boxShadow: shadowLowered, onComplete: () => { myFunc(); }) what I would like to do is separate the tween and the onComplete like this: tl.to(btn, timing, {boxShadow: shadowLowered}) .({onComplete: () => { myFunc }}) When animations start getting complicated this way of writing would make things a lot easier to read. A more general question is, are there examples of 'neat' ways of writing complex timelines. For example, I came across this a while back that makes my life a lot easier - var tl = new TimelineLite({paused: true}); tl.to .... tl.play(); This allows me to 1st declare a timeline, then define it, then play it, making things very readable, rather than trying to do all 3 steps at once.

Jonathan, great call, your spot on.

the issue was trying to tween a 'hsl' & 'a' at the same time. Instead of using a hsla color I used a hsl colour and tween the opacity separately, fixed the issue.

Hi Jonathan, Adding a class with 'pointer-events: none' will still have the issue of firing a 'mouseout' event one last time after adding the class. This issue was clearing up on stack overflow - http://stackoverflow.com/questions/36658279/1-final-mouseout-fires-after-pointer-events-disabled

I modified the code and it shows that the issue isn't with gsap. When using vanilla js a final 'mouseout' event will still fire after pointer-events have been disabled. I posted on stake overlfow, see if anyone there can shed some light on it. http://codepen.io/BradLee/pen/grzrOz .nopointer{ pointer-events: none; } let div = document.querySelector(`div`); div.onclick = function() { console.log('click!'); div.classList.add(`nopointer`); }; div.onmouseout = function() { console.log('mouseout!'); };

ahh those 2 methods will come in handy. Once the click animation is complete, pointer events are re-enabled on the button that was previously clicked. Animations are triggered using subscriptions to events (using reactive programming).