Learning

Hi guys, I'm trying to do a simple carousel where slide 1 moves out and slide 2 moves in... But I'm not sure what is the issue causing slide 2 not to appear. When I check the details in browser, I notice that it did have a transform matrix, and when I uncheck the transform, it appears. When I hide slide 1, the transform works. Hmm... Here's the simplified test which get similar errors. http://codepen.io/kelvinzhao/pen/qRMKKY

OMG... This saved me. I almost wanted to rewrite the whole logic because I can't figure out why it's buggy and works randomly.

@Carl So technically you can also chain t1.delay(1).play(4), etc? Nice!

delayedCall seems to be the ideal way to do this! I've been trying to use a javascript timer to play, but I'm not sure if it's because of clearing timer or overlapping timer, there's a lot of problems. Argh. Thanks!

Hmm... The closest example I can think of is this, var t1 = new TimelineMax({ paused: true }); t1.to( '#scene-1', 1, { autoAlpha: 0 },0 ); If I have two buttons, one to play t1 immediately. one to play t1 after a 3-second delay. How should I add this variable delay into my timeline?

Hi guys, another timeline question! If I have a timeline t1 where some tweens have a delay of 1 second. Am I able to dynamically control this 1 second by passing it in when I'm about to play the timeline again? I.e. something like play( delayVar = 1 ) or play( delayVar = 2 ) depending on my needs? Or the numbers in the timeline is fixed upon the creation of the timeline? Many thanks in advance!

Hi guys, I'm wondering if there's a way to control all timelines together with one command like t1, t2, t3.pause(0);

Hi guys, I have a timeline which I'm where all my tweens start at 0. And one of the tween is a staggerFrom, wondering where do I add the 0 in that case since that location is where the stagger timing is added. var t1 = new TimelineMax({ paused: true }); t1.to( '#scene-3', 1, { scale: 1.2 }, 0 ) .to( '.side-text', 1, { scale: 1.2 }, 0 ); I want to add this .staggerTo( 'img', 1, { scale: 1.2}, 1 ); But have it also start at 0. Where should I add the 0?

Thanks guys for the help! =D

Hi guys, I'm trying to stack 3 images onto a div's background. Wondering if it's possible to tween the opacity of this 3 images separately? Can I target it separately? My background image css looks something like this, background-image: url(https://example.com/base.jpg) , url(https://example.com/overlay1.png), url(https://example.com/overlay2.png);

Very oddly it works when stripped down, but in my file, the 'this' just doesn't register... I wonder what could be the cause... Oops, I just found out! It's because I'm adding extra '' to each item. =x Thanks!

Hi guys, I am trying to rotate and scale my header image when the site loads using the following script, TweenMax.from( '#myGroup', 6, { scale: 0, rotation: 360, ease: Expo.easeOut, transformOrigin: '50% 50%' }); It works fine except when I refresh the page, it goes off center. Apparently checking the source on site, it shows that it stacked two transformations... But isn't a refresh of the page supposed to clear and restart things? How do I solve this issue? It doesn't appear on local, only when it's on the server.

Hi guys, Any idea how to set the this keyword to active on self? E.g. below, when mouse over, self will rotate? $( '#group1', '#group2', '#group3', '#group4', '#group5', '#group6' ).mouseover( function () { TweenMax.to( this, { rotation: 360, ease:Expo.easeOut, transformOrigin: '50% 50%'}); }); Thanks in advance!

Hi guys, Does GreenSock remember the starting value or an object? I am currently using +=100, -=100 to handle open close animations, but I realised if I spam click it fast enough, the object will go out of place. If I want the object to reset to its default value after closing, do I have to create a var to store all those values? Is there a way to shortcut/get the starting values?

Hi Diaco, Thanks for the reply. I just found that it was a bug in my code, the callback does fire after 1 sec even thou the position is already at its end location. =x Cheers!

Hi guys, I have a function that makes a tween of my div's y property and a callback at the end of the tween. The problem is that sometimes that tween will be called when the property is already at it's end position. I would still need the tween to activate the callback after 1 second. How should I go about doing this? Eg. TweenMax.to( $current, 1, { y : -pageHeight * ( u ), ease : Expo.easeInOut, onComplete : animationEnds }); But when $current's y is already in place, it calls onComplete immediately. =(

Hmm... Basically trying to get the shortest code as a fallback when the CDN link doesn't work.

Does anyone know if this fallback will work for TweenMax? Thanks in advance! <script>window.TweenMax || document.write('<script src="gsap/TweenMax.min.js">\x3C/script>')</script>

Hi guys! Thanks for your replies. Am checking out all the links and learning how it works from there. =D Carl, thanks for your analysis. Yea, I was thinking if there was any way to perform the functions needed for the page piling using only GreenSock. If JS/jQuery is needed either way, then perhaps there's no point to add another lib just for the animation portion since jQuery can handle that too.

Hi guys, I'm wondering if it is possible to create a page piling effect with only GreenSock, similar to http://alvarotrigo.com/pagePiling/#page1 As it seems to need to restrict scrolling, yet detect it and also swiping, does it mean it will still need some form of jQuery instead of being able to completely be done with GreenSock? Cheers! Learning