iconofsyn
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by iconofsyn
-
-
looking at the code for this page
it seams that greensock is used to create the moving face animation, looking at the code and the number of image it seams it creates some sort of parallax scrolliong effect
does greensock have a module which will do this for you or does it have to be made manually?
-
I have an interactive web app in which an object can have multiple "states" and there are buttons to switch state
greensock is being used to animate the change from the current state to the selected state.
any of the states can be directly accessed while the object is in any state.
The .to() method is fine for this.
However it is possible that a user will select a different state while an animation to change the state is in progress.
i have 3 qustions
if i use the .kill() command to stop an animation in progress will this halt or reverse the existing animation?
if it halts it will the next animation start from the position it reached when the .kill() command was called?if in my code i call the kill() command an immidiatly start a new tween will there be any noticeable pause in the animation?
-
I tried that immediateRender option and it did not work
QuoteintroTimeLine.add(
TweenMax.from($('#cube'),1.5,{
ease: Bounce.easeOut,
immediateRender:false,
top:-10000,transform:"rotatateX(90)"}
)
);
introTimeLine.add(
TweenMax.from($('#cube'),0.5,{
ease: CustomEase.create("custom", "M0,0 C0.126,0.382 0.658,0.852 0.816,1 1.008,1.18 0.818,1 1,1"),
immediateRender:false,
transform:"translateZ(-5000px)"}
)
);
The problem is that my CSS code contains this style
Quotetransform :rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-5000px);
And after the .from() commands have run the object has this CSS style attatched to itQuotetransform: translate3d(0px, 0px, 100px);
Chrome DEV tools shows that the first style is not applied
Theifore i cannot change the X Y and Z values (from chrome dev tools or JS) and observe a animation
If i disable the second style (the one which .from() adds) using chrome dev tools then changeing the X Y Z values in the second style does produce an animation.
This proves that the problem is caused by the final style which the .from() function applies during its animation still remaining on the element after the animation has finished.
Is there any way to make greensock remove this
or will i have to do it myself (say using jQuery) -
12 minutes ago, PointC said:
You won't be able to have multiple animations in the same from() tween with different durations and eases. If you don't want the target to move to its starting position, you can set immediateRender to false. From the docs:
NOTE: By default,
immediateRenderistrueinfrom()tweens, meaning that they immediately render their starting state regardless of any delay that is specified. You can override this behavior by passingimmediateRender:falsein thevarsparameter so that it will wait to render until the tween actually begins.More info: https://greensock.com/docs/TimelineMax/from()
Hopefully that helps. Happy tweening.
if i do that
And i have the objects final position declared in my CSS sheet
will it continue to display in its final position after the tween ends -
I want to have multiple animations in a tweenmax.from() command.
This is for an intro animation. I have used CSS to place objects in their permanent position and am trying to use tweenmax.from() to make them animate from outside of the screen into their proper positions.I cannot simply have multiple tweenmax.from() commands because if i do this then the objects animated by the second or later tweenmax.from() start by appearing in their final position and when their animation starts they jump to their animation start position and then animate back to where they should be.
Also i need to have different easing on each command
my current code looks like this-----------------------------------------------------------
introTimeLine.add(
TweenMax.from($('#cube'),1.5,{
ease: Bounce.easeOut,
top:-10000,transform:"rotatateX(90)"}
)
);
introTimeLine.add(
TweenMax.to($('#cube'),0.5,{
ease: CustomEase.create("custom", "M0,0 C0.126,0.382 0.658,0.852 0.816,1 1.008,1.18 0.818,1 1,1"),
transform:"translateZ(100px)"}
)
);--------------------------------------------------------------
is there any way i can move the two animations into the saem from command AND have a different speed and ease on each one and delay the second on until the first one has completed.
NOTE
IN my code the second animation is a .To() command, currently i am using this as a work around and it requires me to set the objects translateZ in my CSS style as the point where it should be at the start of the animation. I do not want to do this because this relies on greensock to add its perminant CSS rule and this is interfering with things i wish to do after the intro animation completes
to summarise my questions are
Can i have multiple animations in the same .from() command which each have their own speed and easing type, and can i delay the start of the second one until the first ends. -
6 hours ago, greenanimation said:
For my experience using 3d animations, what I do is set the perspective property of the wrapper of the desired animated element.
For your case it would be the cube element. (So set the perspective style property of its wrapper to ~600px)
Than for the animation it would work as expected, that is - using rotationX, rotationY for the cube element would also rotate the inner divs.
Peace
Yes
i know that rotating the cube element would rotate the inner divs with the cube
but it i placed another 3D space inside on e the the cube faces
would this rotate with the cube element whne it is rotated
will it rotate on its own (with all of its child objects) when it is rotated -
I want to embed a transform-style: preserve-3d; 3D object inside another transform-style: preserve-3d; 3D object
currently i have the following HTML
<div id="cube">
<figure class="front">1</figure>
<figure class="back">2</figure>
<figure class="right">3</figure>
<figure class="left">4</figure>
<figure class="top">5</figure>
<figure class="bottom">6</figure>
</div>
each figure element is a face on the cube.
the id="cube" element has the transform-style: preserve-3d property.
If i place another transform-style: preserve-3d container inside one of the figure elements
1) will it still rotate with the cube in the same way any normal element on one of the cube faces would?
2) will it be possible to animate it in 3D in the same way i can animate the cube. -
I am creating a demo which will display every possible CSS graphical/animation effect
The demo will consist of a cube which the user can rotate and each face of the cube will have various CSS graphical/effects mostly animated playing in a infinite loop.
Bellow is a list of effects which i know about, can anyone think of any more
Background Gradients
Clipping and Masking
Border Radiuswebkit-reflect (is this one available outside of web-kit yet)
Filters-blur(px) -brightness(%) -contrast(%) -drop-shadow(h-shadow v-shadow blur spread color) -grayscale(%) -hue-rotate(deg) -invert(%) -opacity(%) -saturate(%) -sepia(%)
Transform
-Translate(X,Y,Z)
-Scale(X,Y,Z)
-Rotate(X,Y,Z)-Skew(X,Y)
-
staggering
in GSAP
11 hours ago, Carl said:i suspect if you iterated through the objects in b in a positive manner by incrementing i in your loop (i++) instead of (i--) you would have things animate in the right order.
Very tough to say though by just seeing the code you supplied. CodePens or other demos in a live and editable environment are much better for us to work with.
It was difficult because the items needed to be animated in one order
but the bezzier supplied needed to go through them in the opposite order (because the delay got shorter each time effectivly causing the first item animated to appear to move last)
in the end i simply made a reverse version of the array.
since only the index is needed in the reverse version (not the object itself) i could make it more efficient by not copying the normal array at all. instead i could make an empty array of the same length and reverse that -
Run on GPU
in GSAP
It is a well known hack that an animation can be made to run on a GPU by applying at least one CSS 3D transform property
so with 2D only transforms often a single 3D transfom which does not actually do anything is added to force GPU rendering.
when using greensock animations such as x:200, transformOrigin:"50 50" is the use of GPU rendering applied automatically?if not
how can it be done and does it have to be done seperatly for all tweens?
-
-
staggering
in GSAP
I have implemented your sameple custom.ease code
before my code was
for(;i>=0; i--){ tweenStartTime = tweenStartTime + 0.002; squezeTimeLine.add( TweenLite.to(b[i], this.settings.firstStageSpeed, {scaleX:0.05, transformOrigin:"50 50"}),tweenStartTime); }
now my code is
for(;i>=0; i--){ squezeTimeLine.add( TweenLite.to(b[i], this.settings.firstStageSpeed, {scaleX:0.05, transformOrigin:"50 50"}), this.curve.getRatio(i/b.length) * 0.4); }
This gives an effect similat to what i want
BUT
The objects now appear to get animated in the wrong order, im guessing this is down to the start-delay increasing as you go up the list of objects.
How can I "invert" it back so that things animate in the right order which still keeping the easing effect
I apologize that my maths is not very good -
staggering
in GSAP
I have been studying your demo, comparing it with the greensock documentation and attempting to understand it
the line
delay:function(index)
is confusing, the index variable does not get mentioned before this
so where does it come from? is it automatically available because it is inside a tween?
and is it the index of the current object being animated? -
staggering
in GSAP
On 6/22/2017 at 2:36 AM, Carl said:var curve = CustomEase.create("curve", "M0,0,C0.083,0.294,0.214,0.596,0.468,0.82,0.588,0.926,0.752,1,1,1"); var numBoxes = $(".box").length; $(".box").each(function(index, element){ TweenLite.set(element, {x:curve.getRatio(index/numBoxes) * 250}) } )
would i be correct to believe that1) you are creating a custom ease object.
2) you are using this in place of the "value" field in X:value
3) I could do the same in my staggerTo by placing the ease object in place of the stagger time -
2 hours ago, Carl said:
hmm, this seems to be very similar to your post from a few days ago.
It would be helpful if you would respond to the answers you receive so that we know whether or not the issues are resolved. Maybe double-check that your notifications are configured so that you receive emails when your threads get responses.
it might be
i am still working on the same project and decided to use the loop to add children to timelines instead of stagger because i thought it would give me more flexibility later on.sorry
-
My project currently used the following code
var b = $(containerDiv).children(); //JQUERY i = b.length - 1; tweenStartTime = 0; for(;i>=0; i--){ tweenStartTime = tweenStartTime + 0.002; HorizontalMoveTimeLine.add( TweenLite.to(b[i], this.settings.firstStageSpeed, {left:200, transformOrigin:"50 50"}),tweenStartTime ); }
This takes an unknown number of target objects (expected range is in the low-mid hundreds but there could be thousands) and animates each one in the same way with each starting 0.002 seconds after the previous.
If this was drawn on a graph it could be represented with a straight line.
However i want to stagger the times in such a way that if they were plotted on a graph they would draw an S shape.
Does greensock have any functions which can be used to generate a array full of these start times if the total number of objects, the length of the animation and a defined bezzier is known?
if not how can this be done?
can greensocks bezzier functionality be used for this or modified in such a way that it can be used for this? -
here is a simple codepen demo
In this i have used 3 embedded time lines.
Each embedded timeline tween's ONE object, however in my real code each embedded timeline will tween hundreds of objects.
In my real code each embedded time line could have a different length each time it is used because the objects to be animated are dynamically generated.
embed_tl_one needs to start at the begging, so no problems here.
embed_tl_two needs to start at some point during embed_tl_one playback, since embed_tl_one has a fixed start point the .duration() method could be called on embed_tl_one and combined with a multipler between 0-1 to start embed_tl_two at some point after embed_tl_one has started .
embed_tl_there is different, this needs to start at some point during embed_tl_two playback.
Also, because my animation is complex i need to experiment with the embedded time lines start time and know that all later ones will shift their start time accordingly so i do need to be able to set start times which are relative to the start or end of other timelines.incase you cant see the codepen demo here is the JS code
var tl = new TimelineLite(); var embed_tl_one = new TimelineLite(); var embed_tl_two = new TimelineLite(); var embed_tl_three = new TimelineLite(); tl.add(embed_tl_one); tl.add(embed_tl_two); tl.add(embed_tl_three); embed_tl_one.to(".red", 1, {x:500}) embed_tl_two.to(".blue", 1, {x:500}); embed_tl_three.to(".green", 1, {x:1000});
-
19 minutes ago, PointC said:
Using relative positioning of the nested timelines, you can delay their start time or have them overlap. Using a label, you can have nested timelines start at the same time. (more info about labels in the blog post I linked to in my last reply) Here are the basic building blocks of nested timelines on a master and relative positioning.
Again, if you'd create a CodePen demo with a simplified version of your question along with the desired outcome, it would be most helpful in getting you the best answers.
Thanks.
thanks for your help, ill get a codepen demmo setup when i have time -
I dont think that covers what i want
suppose i have a time line with 3 sub time linesi want the 3rd sub timeline to start relative to the start or finish for sub timeline 2
how can this be done
-
I am making a animation which has some complex timing regarding the animation of many elements.
all of the elements need to be animated in the same way but the complexity comes from the start timesso i have created a master time line and placed embedded timelines inside it.
each embedded timeline has has a tween for each element, the tween is always the same but the start time differs for each.for(;i>=0; i--){ startTime = startTime + 0.002; HorizontalMoveTimeLine.add( TweenLite.to(b[i], this.settings.firstStageSpeed, {left:200, transformOrigin:"50 50"}),startTime ); }
i need to be able to control the start point of each embedded timeline.
so far i have managed to get each one to start at a fixed time. with this type ofcodemasterTimeLine.add(HorizontalMoveTimeLine,0.5);
Is there any way i can set a new embedded timeline to start at a time relative to annother embedded timeline?
i know that if i dont set a start time then it will default to the end of the last embedded timeline to end - and thats it.
is there a % based way of doing it (ie start when a specific timeline reaches 70%)
-
staggering
in GSAP
Use of the stagger timeline functions can be compared to a straight line on a graph because the amount of time between each stagger is always the same.
Is it possible so have a stagger which if represented on a graph would be a curve, and is automatically calculated based on some control point values similar to how bezier works?
if not
is it possible to put a lot of objects on a timeline and automatically calculate their start time based on some control point values similar to how bezier works?
if not
is there any way to automatically define start times for a list of animated objects in any way other than writing my own function (or using a bezier calculator) to calculate the list start times and passing these values into the line line objects start property (say by using a loop) -
The documentation for things like the tweenlight/max constructors and methods such as from(), to() ect all say they can accept an object or array of objects as their target property.
I have 2 questions both regarding passing an array of objects1)
If a Jquery selector is used and it matches multiple objects (ie $('.className')) is this valid input for greensock?(the green sock code for this may look something like this)
TweenMax.to($('LI'),2,{opacity:0.5});
2)
If not using jquery what format does the array need to take, would the following code be validvar objects = []; objects.push(document.getElementById('someDiv')); objects.push(document.getElementById('someOtherDiv')); objects.push(document.getElementById('someThirdDiv')); TweenMax.to(objects,2,{opacity:0.5});
parralax effect
in GSAP
Posted
Thanks
i have not looked at the tutorials yet but im guessing its little more than creating a css 3d space, creating a container in that space which rotates in response to mouse move and placing "layers" on the container and setting their z position at different places or each one. the images go on the layers