Lynx

My goal is I have an SVG image, when via an anchor is clicked the SVG image which is really a div with content does a transition. How does the transition work simple; imagine a box, or a div, this div is red, your SVG image is a 12px X 12px image particles are replaced by this image, from the top of the box or div the particles emit, rather the particles of the SVG image emit, using SVG is more compatible with responsive layouts. Anyhow as the particles, rather the particles of the image rain down it changes from a red div or box, to a blue div or box, the particles end when the div or box is not completely blue, in other words they don't rain down, via gravity forever, it ends by the end of the div. And there is displayed the new blue div/box with the new content, understood ?

What if I don't use a variable, as such: TimelineMax.to(".proxylogo",24,{skewY:"1px",skewX:"2px"}) TimelineMax.to(".proxylogo",12,{skewY:"34px",skewX:"12px"}) TimelineMax.fromTo(".proxylogo",34,{rotate:50,rotate:90}) TimelineMax.fromTo(".proxylogo",60,{skewX:"50px"}) TimelineMax.fromTo(".proxylogo",23,{rotate:-25,rotate:32}) TimelineMax.fromTo(".proxylogo",12,{rotate:160,rotate:200}); Why doesn't this work ? I decided to put things in a variable; no progression $(document).ready(function(){ var logo = new TimelineMax ({repeat:2;}); logo.add( TweenMax.to (".proxylogo",24,{skewY:"1px",skewX:"2px"})); logo.add( TweenMax.to (".proxylogo",12,{skewY:"34px",skewX:"12px"})); logo.add( TweenMax.to (".proxylogo",34,{rotate:50,rotate:90})); logo.add( TweenMax.to (".proxylogo",60,{skewX:"50px"}));

I know the Physics2DPlugin does, obviously the Physics aspect of particles, but what does the actual particles with TweenMax ?

The following is the code, this is only a faux example. The code skews, then rotates but doesn't skew and rotate again ? TweenMax.fromTo(".proxylogo", 24, {skewY:"1px",skewX:"2px"},{skewY:"34px",skewX:"12px"},{rotate:50,rotate:90},{skewX:"50px"},{rotate:-25,rotate:32},{rotate:160,rotate:200},{skewY:"-24px",skewX:"50px"},{rotate:12,rotate:45});

All these particle effects, wow, is it possible to, with the help of a svg image do a transition between one <div> into another <div> as the SVG image as the particle effect ?

I thought TweenMax takes care of the array of points on the curve, when looking at the codePen code there is JS Loops and empty arrays happening before TweenMax is even called, what's up with that ? One more thing, the curve doesn't orient to the path, is this not possible ?

How do you tween between multiple CSS values, what is the correct command, I thought it was FromTo() until I put it to the test ?

Thanks !

How come if I define pixels & I don't put the value including the unit of measure in quotes, it doesn't work ?

Looking for recommendations on an online bezier curve creator that can output X,Y values. The problem with what I found are the X,Y coordinates based on the canvas size of the online curve generator, which is most likely the case, that won't match the canvas size of my div, the end result will be a curve that animates along a path I don't want.

Thanks, I don't put rotation values in a string but I must put the position values in a string ? I know I read that the CSSPlugin takes care of this, why put it in a string ?

How do I tween between two CSS properties, the following code is not moving the div class left while at the same time rotate the div class ? What am I doing wrong ? Or must I be using TweenFromTo() ? $(document).ready(function(){ TweenMax.to(".proxylogo", 12, {left:100px,rotation:80}); ;})

My class has a position as well some positioning applied to the style. When using jQuery load() function and loading the page, the class doesn't move to the left ? .proxylogo {background-color:orange;height:200px;width:360px;margin:0 auto;position:relative;top:150px;} Can GSAP animate shadows, for example if I'm animating perspective and when the image, for example gets closer to the background the shadow is almost none existant, when the image rotates in perspective further away the shadow becomes more apparent ? P.s - Email notifications are not working ?

I'm new to GSAP and well, anything identical to this I want to create animations on my pages. I have TweenMax loaded via CDN along with the CSSPlugin. Is this not the correct way to animate CSS properties I don't see my class animate to the left as a starting point ? <script>TweenLite.to(".proxylogo", 12, {left:"100px"})</script> What if you animate a CSS feature that IE 7 or IE 8 or a mobile phone browser doesn't understand, is there a fall back option with GSAP ?