Leaderboard

The general idea would be to build a timeline. Here is a starting point for you You may need to tweak it a bit.

Hi, Actually this has nothing to do with React (how about that React is not the culprit, who would have suspected?? ) but with the fact that the ScrollTo Plugin doesn't work with relative values like a regular tween using the CSS Plugin, that's why the first code you posted doesn't work (it actually doesn't work with or without React) and the second snippet does. What you can do is access the scrollLeft property of the target element and add the increment value to that: TweenMax.to(content, 0.5, { scrollTo: { x: (content.scrollLeft + incrementNumber) } }); That should do the trick. Let us know how that works. Happy Tweening!!!

Hi @digableinc Welcome to the forum and thanks for joining Club GreenSock. I'm a fellow AE user too. Masking an image is no problem. The easiest way would be to add the image to your SVG (so it scales nicely) and then create a mask for it. Mask color is important. White will show everything. Black will hide everything. You can use gradients in masks too. Here's a fork of your pen: We had another question recently about showing a full screen background image and this was my mask solution for that thread: Here's a good resource for some additional learning about masks and clip-paths. https://css-tricks.com/masking-vs-clipping-use/ Hopefully that helps. Happy tweening and welcome aboard.

I have a master timeline and a number of children timelines which is added to the master timeline through .add() method. I have killed all the timelines but still GSAP CSSPlugin holds some reference just like the image which i have added to this post. Is there anything I am doing wrong ?

Try something like this. function onStop(){ mainT.kill() document.getElementById("main").innerHTML = ""; for (var i = 1; i < 25; i++) { window["t" + i] = null; } mainT = null; TweenLite.set(document.createElement("div"), { x: 100 }); }

http://codepen.io/jchristof/pen/XppvwE <div id="dontholdme"></div> TweenMax.set('#dontholdme', { x: 0, y: 0, width: 100, height: 100, background: '#ff0000', position: 'absolute' }); setTimeout(()=>{document.getElementById("dontholdme").remove()}, 1000); Then sometime in the future open chrome devtools->profiles->take heap snapshot. See that the window is holding a ref to CSSPlugin which is holding a ref to the disconnected dom element keeping it alive in memory.

Sorry, let me rephrase that and go back to my original post and an example: I create a div attached to the dom. I use TweenMax.set() to position the div. I call remove() on the div - it is no longer rendered by the page. The div remains allocated and appears in heap profile. The div is rooted to window.CSSPlugn. I was not expecting gsap to keep a reference to this element. I expected the element to be reclaimed by the garbage collector after removing it. Is there a way to ensure that TweenMax does not cache elements after they are removed from the dom? For us, a node in that state produces unexpected side-effects that will be tricky to work around.

No, in our case elements that are not garbage collected (like this one in the CSSPlugin) after they are removed from the dom prevent the garbage collector from running on our removed controls and unused app instances (references from the element to those items.) Ultimately what I'd like is for TweenMax, CSSPlugin etc. to not hold an element past it's being removed from the dom. I don't mind calling a function to do this. TweenMax.releaseDetachedDomNodes(); Multiples of our same app can run at the same time, so tearing down the whole TweenMax is not an option since one app may be running animations at the same time another is being unloaded. Somehow grouping tween functionality might also work for us if I could say: TweenMax.releaseEverthing(relatedToApp1); and then later TweenMax.releaseEverthing(relatedToApp2);

Hello KerryRuddock autoAlpha is part of the GSAP CSSPlugin for GSAP JS: http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/ autoAlpha Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.Example of usage: //fade out and set visibility:hidden and opacity to 0 TweenLite.to(element, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible and opacity to 1 TweenLite.to(element, 2, {autoAlpha:1, delay:2});