jamiejefferson

It's definitely possible. I think this should replicate that (not really familiar with CSS animation, so hopefully it's at least close to what you are after - there are probably differences in the easing used):
var foot = $('.foot'); var tl = new TimelineMax({ delay:7, repeat:-1 }); // if animation-delay occurs every time, add repeatDelay:7 to the TimelineMax object vars. tl.to(foot, 1, { rotation:"25_cw", transformOrigin:"right top", ease:Power1.easeInOut }); tl.to(foot, 1, { rotation:"0_ccw", transformOrigin:"right top", ease:Power1.easeInOut });

It's not a bug; GSAP can't just 'ignore' a CSS rule. Every frame of the animation GSAP updates the style for left, and then you have CSS telling the browser to apply that change over 0.3s. Removing the transition is the correct fix for this.
 
If you have not saved your own reference to the tween e.g.

var mytween = TweenLite.to(foo, 1, { bar: 0 });then it will be automatically released for garbage collection at an appropriate time. If you have kept your own reference, you can kill it with mytween.kill();

You haven't included the ColorPropsPlugin in the page e.g.
 
http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ColorPropsPlugin.min.js
 
Not sure if this is just your example or what you intend to tween, but this would be simple to write as
 

TweenMax.to(document.body, 5, { backgroundColor:'rgb(255,255,255)' });

The correct syntax (this is the actual CSS syntax) uses spaces not commas to separate the values.
{ boxShadow:"35px 45px 56px #FF5050" } Commas are used for multiple shadows
{ boxShadow:"35px 45px 56px #FF5050, 1px 1px 1px #FFFFFF" }

If you add the line
return tl; at the end of each logo function, then
master.add(logo()) .add(logo2()) .add(logo3()); will work as I believe you are intending.

By the way, I have a feeling I've discussed this in another thread somewhere, but the reason I recommend a Timeline as a good analog for setInterval (instead of delayedCall) is that it prevents drifting over time. e.g.
 
Let's say our interval function takes a variable time between 0.2s and 0.4s to run, and the interval time is 1 second:
 
with Timeline or setInterval ( |** = function running ):

0                 1                 2                 3                 4
------------------|****-------------|******-----------|********---------|
 
no matter how long the function is taking, it doesn't affect the fact that you've asked it to be called once per second. The exact point that it is called can be slightly variable (probably off by a few ms based on the CPU time given to the browser and JavaScript), however the general idea is that in 10 000s the function should be called 10 000 times.

with recursive delayedCall or setTimout:
 
0                 1                 2                 3                 4                 5
------------------|****-----------------|******-----------------|********-----------------|
 
as you can see, by running the function, then saying "ok do this again in 1 second", there is a lot of room for time drift to occur. My example is exaggerated for effect, but this still occurs at smaller scales.
 
 
Now, in your Timeline you had the call duration as 0.02; that only gives 20ms for both the function to run and any browser layout/painting operations to occur before that function is called again. I imagine that Chrome is just not keeping up with all of that.
 
When you change it to the delayedCall then restart version, you've now got infinite time for the function and browser layout/paints, then patiently wait for 20ms and do it again.
 
Up to you if this drift is important to your animation or not. I would however recommend this improvement
var offset = elem.offset(); TweenLite.set(elem, { left: offset.left + (goalX - offset.left) / moveSpeed }); as calling .offset() one less time per frame could improve performance, and using TweenLite to set the values allows them to be synchronised with the GSAP ticker, so you don't end up pushing more layout adjustments than the browser can keep up with.
 
The next recommendation would be to consider using x/y transforms as they may improve performance by reducing layout thrashing (especially if you have lots of elements) and offloading some rendering to the GPU.
var offset = elem._gsTransform || 0; // || 0 just in case _gsTransform hasn't been set yet TweenLite.set(elem, { x: offset.x + (goalX - offset.x) / moveSpeed });

I'm not an expert on perspective/perspective-origin etc, so I can't really explain how any of this works to you, but trial and error got me to this

See the Pen XJddYg by jamiejefferson (@jamiejefferson) on CodePen
which appears to be pretty close to the effect I think you're after.

Ah ok I see what you're working at now. What you had created was an empty timeline, and on every mouse scroll it would add a new 2 second tween to that timeline. Since the tweens would always be towards the same end values, after about 2 seconds it would appear to have "stopped" but really it's just playing a bunch of tweens to and from the same set of values. The first step would be to move the line creating the tween outside of your event, and just playing that timeline forward and backward.
 
I've added 2 simple ways to get this kind of effect with different results. One has an "unlimited" speed, while the other respects the original speed of the timeline:
 

See the Pen gbaExL?editors=001 by jamiejefferson (@jamiejefferson) on CodePen

You create a new scope for your test variable when you use the keyword var. Changing the line
var test = 'red'; to 
test = 'red'; makes it look down the scope chain to the original variable, and works as intended.

Hi, welcome to the forums.
 
fromTo() isn't used for the purpose of combining to() and from() tweens into a single call - it's only used to create a tween where you know both the start and end values for each property of the tween. If you only have one of the values, you would just use from() (start values) or to() (end values).
 
e.g. say #foo is at left:200, and we would like to tween it from left:0 to left:100. For this a single from() or to() tweens is not enough, and you would use fromTo()

TweenLite.fromTo("#foo", 1, { left: 0 }, { left: 100 }); // would tween from 0 to 100, as intended TweenLite.from("#foo", 1, { left: 0 }); // would tween from 0 to 200 TweenLite.to("#foo", 1, { left: 100 }); // would tween from 200 to 100 For your codepen, it would probably be best to separate into 2 tweens: one for tweening to() red, and one for tweening from() left:-50

Well you can rely on onComplete, but if you kill() the tween before it has completed... that's not the same as completing the tween. You can make sure a tween has been completed first by calling progress(1) before killing it. e.g.

foo.progress(1).kill(); // renders foo's end state, onComplete is triggered immediately, then foo is killedThis won't call the onComplete again if the progress was already at 1 (i.e. 100% played). Whether you see that as 'safe' in your situation is up to the architecture of your program. 
In your example, you can use TweenLite.getTweensOf($view) to get an array of tweens, then iterate over them in the above manner e.g.

var tweens = TweenLite.getTweensOf($view); for (var i = 0, l = tweens.length; i < l; i++) {   tweens[i].progress(1).kill(); } One other option if you don't want to render the end state would be to access the onComplete function directly e.g.

var tweens = TweenLite.getTweensOf($view); for (var i = 0, l = tweens.length; i < l; i++) { var t = tweens[i]; if (t.progress() !== 1) t.vars.onComplete(); t.kill(); }

Well Snap (and Raphael) has a pretty handy function to convert the path to cubic data, so 
See the Pen ff30ccf7f3a8b69989142d664325f3b9?editors=101 by jamiejefferson (@jamiejefferson) on CodePen
 
Since Snap is Apache 2, you could probably extract the functions needed to reduce the filesize, but I'm feeling lazy right now

IE doesn't support CSS transforms on SVG elements. You need to use the transform attribute of the element, although that doesn't really help with the transformOrigin.

e.g.
function svgTransformIE(){ // include a check for IE first? var t = this.target; t.setAttribute('transform', t.style.transform) } // transform origin doesn't have an equivalent attribute so it won't apply in IE TweenMax.to(foo, 1, {rotation:100, transformOrigin:"129px 154px", onUpdate:svgTransformIE}); Not sure if there's a workaround for transformOrigin...

Why don't you feel that value will be accurate? It is the correct way to read style values in javascript.

this // the tween target // whatever was passed as the animation target e.g. if it a jQuery object was used that will be returned [0] // first element in the jQuery object style // javascript object for element styles width // the value of the style you want GSAP does add a _gsTransform property to DOM elements it is tweening if transforms are used so that the transform values don't need to be manually extracted from a matrix. For all other values the style property is used. If you're using something like jQuery etc you could use their methods to access values if you prefer e.g. $(foo).css('width'), but the style property is also fine. The only values that can be wonky to extract from the style property are vendor prefixed styles.

Please read my previous post again. Your jQuery is not correct. It seems that instead of correcting that you just added webkit-only transforms to the html style attributes to show the back side first. That doesn't address the original problem, and creates the new one you just posted.
 
You should fix your .click() calls to use only one function as suggested, and then you can add some conditional logic to determine whether to spin to side A or B.
 
A solution might look something like this
 

spun = false; $(".cardWrapper").click(function() { TweenLite.to($(this).find(".card"), 1.2, { rotationY:(spun ? 0 : 180) }); spun = !spun; });

You can also shorten the code for the dummy tween to
tl.set({}, {}, 5);

Please don't create multiple threads for the same issue. Your issue at http://greensock.com/forums/topic/10553-how-to-start-an-animation-when-the-visitor-scrolls-down/ is still active.

Your code is not removing then adding back to the DOM. It is removing then creating new DOM elements then adding those to the DOM. The original DOM elements are still detached and GSAP has no connection to the new DOM elements so the tweens are not going to show up.
 
This modification saves the DOM elements so they can be added back, which retains the tweens:
See the Pen leakd by jamiejefferson (@jamiejefferson) on CodePen
 
If you have a lot of DOM elements to always add/remove then it might just be better killing the timelines when you remove the elements, and rebuilding them again when recreating them (rather than clogging the memory with too many saved elements).

Use the throwResistance property to affect the resistance of a the throw. Values higher than 1000 will increase the resistance.
 
You can check out all the properties of Draggable in the API http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/

Only data-ca-rows and data-ca-columns in that selection would be directly animatable with AttrPlugin since they are plain numeric values. AttrPlugin won't be able to tween a value like "100% 100%" or "no-repeat". Only the CSSPlugin has the extra logic to handle complex values like that since it's required by many CSS rules. You could get around this by animating values on a proxy object and applying them to your element's attributes onUpdate.

Yes the error is in this line:

vr_pan5 = new TimelineMax({... onCompleteParams:["#fg5", "#bg5", "#fg1", "#bg1", vr_pan1]});At this time vr_pan1 hasn't been defined yet, so your onCompleteParams look more like["#fg5", "#bg5", "#fg1", "#bg1", undefined].
 
Are you aware that timelines can be nested to handle this sort of sequencing? I think something like this should remove the reliance on onComplete chaining (and replaces jQuery with GSAP opacity fades)

vr_pan1 = new TimelineMax(); // no need to pause a nested timeline. repeat 0 isn't required as it's the default // add tweens... vr_pan2 = new TimelineMax(); vr_pan3 = new TimelineMax(); vr_pan4 = new TimelineMax(); vr_pan5 = new TimelineMax(); var master = new TimelineMax({paused:true, repeat:-1}); // infinite repeats master.add(vr_pan1, "vr_pan1") .to("#fg5, #bg5", .4, { autoAlpha: 0 }, "vr_pan1") // use labels to attach fades to the start of vr_pan1 .to("#fg1, #bg1", .4, { autoAlpha: 1 }, "vr_pan1") .add(vr_pan2, "vr_pan2") .to("#fg1, #bg1", .4, { autoAlpha: 0 }, "vr_pan2") .to("#fg2, #bg2", .4, { autoAlpha: 1 }, "vr_pan2") // etc .add(vr_pan3, "vr_pan3") .add(vr_pan4, "vr_pan4") .add(vr_pan5, "vr_pan5"); $( window ).load(function() { master.play(); });

Here's a rough example that combines the getChildren method of timelines and properties of timelines and tweens such as vars to try and export some javascript.
 

See the Pen eEyhl?editors=001 by jamiejefferson (@jamiejefferson) on CodePen
 
I think the hardest thing to get right would be the tween targets. GSAP stores the DOM node/nodes for the target, but turning that into standalone raw JS is a bit trickier. If the target DOM node doesn't have an id, then how would you generate a selector for it? I'm not sure, but if you could add some recording into the tool you've created then you might have an easier time reproducing the exact code you need?

I've roughly updated the pen with repeating tweens
See the Pen GqxFs by jamiejefferson (@jamiejefferson) on CodePen

Looks like you're flipping both pages at the same time.
 
In the .pageWrapper click function, $(this).find(".page") is selecting both pages, but if I change it to $(this).find(".page")[1] then page2 remains in place underneath.

Actually I think the issue here is that you're trying to pass the barTimer variable into the function that creates it... You'll find that barTimer is undefined until the delayCall has been created, so it won't work that way.


See the Pen xkLji?editors=001 by jamiejefferson (@jamiejefferson) on CodePen


By default, the scope is already the tween/delayedCall so you can already just reference it with this i.e. function pre_baserate_loading() { var loadingText = ['Searching Similar Preferences.', 'Retrieving Products Purchased.', 'Examining Real-World Experiences.', 'Eliminating Inadequate Products.', 'Retrieving Results.' , 'Codifying Results.']; var textLength = loadingText.length; var count = 1; var duration = 45; var barTimer = TweenMax.delayedCall(duration / textLength, updateLoadingBar, [count, textLength, loadingTextr]); } function updateLoadingBar(count, textLength, loadingText) { if (count >= textLength) { this.kill(); this = null; } else { count++; if (this) { this.restart(true); } } }
Alternatively, GSAP allows you to pass a reference to the tween/delayedCall as a parameter using the string "{self}", like this:
TweenMax.delayedCall(duration / textLength, updateLoadingBar, [count, "{self}", textLength, loadingTextr]); parameter 2 will be the tween/delayedCall as you were hoping for.