Search the Community
Showing results for tags 'fromto and css'.
Found 2 results
-
I have been trying to get a text rollout animation working in Adobe Captivate. A kind person on the Adobe forums responded with an example making use of GSAP library using the fromTo command, which largely resolves the problem. The animation is dropped into a Captivate slide as a zipped up .html file to animate the text at a certain point on the timeline, only compatible with HTML5 output, which is fine. The problem is that if the slide is replayed, e.g. by restarting the timeline or rewinding and replaying, the fromTo animation does not replay, it only works by refreshing the whole browser page and restarting the player. The question is, how can I get the fromTo to replay correctly if the player timeline is rewound? Gsap code is: gsap.fromTo(“.text”, {xPercent: -100}, {xPercent:0, duration: 2, ease: “none”, overwrite: “auto”});
-
First post, so I may be a n00b. I've noticed that if I am using TimelineLite and I instantiate a fromTo tween that until the TImeline fires the tween for the first time, the css associated with the from portion of the animation is not reflected until that moment. in other words if I animate fromTo() and set the 'from' opacity to 0, it will be visible until that animation starts, then it will animate from '0' to whatever. I would imagine this is not intentional so I want to clear up the possibility that it is a built in limitation before I debug my code, as it is large and involved. I am adding tweens to the timeline via other js functions , so it my be my code is doing something funky but I need to make absolutely sure no one else can reproduce this issue. settings.startOpacity = 0; tl.add( TweenLite.fromTo(target,s,{ opacity:settings.startOpacity, }, { delay:delay, opacity:settings.endOpacity }) ); // so once this fires it works fine, but before then the opacity is set to 1. To further complicate things, setting the css via the style sheet to 0 does not work as the browser then sets it to 1, regardless of adding an '! important' tag.
