Lynx
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Lynx
-
-
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.
-
Hi Lynx
Try this :
TweenMax.to(".proxylogo", 12, {left:"100px",rotation:80});and pls read the CSSplugin Doc. :
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}); ;}) -
Hi and welcome to the GreenSock forums.
Your script looks OK to me. Perhaps you could wrap it in jquery's ready() method in order to wait for the document's element are in place and, if you added reference to your styles in the head section, all css properties have been read and parsed to the DOM elements, like this:
$(document).ready(function(){ TweenLite.to(".proxylogo", 12, {left:"100px"}); });Now if for some reason you need some specific dimensions of an image, those will not be completely rendered when the DOM is ready, in that case you can use jquery's load() method or javascript's onload:
// waits for every asset in the page to be completely loaded $(window).load(function(){ TweenLite.to(".proxylogo", 12, {left:"100px"}); }); // this code works in the same way as the one above, just no dependencies window.onload = function(){ TweenLite.to(".proxylogo", 12, {left:"100px"}); };Finally, check that in your CSS the element you're moving has a position defined, like relative, absolute or fixed, otherwise you won't be able to change properties like top, left, margins, etc. In this case I'd also suggest you to use x and y instead of left and top, because it'll send the animation rendering to the GPU creating a faster and smoother animation:
$(window).load(function(){ TweenLite.to(".proxylogo", 12, {x:"100px"}); }); // this code works in the same way as the one above, just no dependencies window.onload = function(){ TweenLite.to(".proxylogo", 12, {x:"100px"}); };As for CSS properties not readable by any browser, that will only depend on the support of that particular browser for that particular property. To learn more about that check this site:
Rodrigo.
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 ?
TimeLine Max particles
in GSAP
Posted
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 ?