Search the Community
Showing results for tags 'set()'.
Found 5 results
-
Tweenings Greetings, I've shared a demo that works okay in codepen, but has many syncing issues in prod (react). I'd like to know if there is a better way to do what I'm doing here. I'm also curious to find some docs on helping gsap get initialized before rendering. Seem to have the odd refresh where my text treatment is all messed up. After initial text and video wipe this should happen: With the frame cuts of the video the span in "The next number is" {1} should update. With the frame cuts the bg gradient should also update. On repeat is should stay in sync with the video. Thanks for any help. First time forum asker.
-
Hello, I have a timeline which makes the first div disappear and, on complete, it plays the timeline on reverse on the second object, so the second appears. In order to prepare the second and third object to play reverse I set them up with a TweenMax.set(). The issue is that once TweenMax.set() runs it kills all timeline actions, i.e. if I play the timeline on those elements it works but it doesn't have any effect on the object. To see what I mean check the codepen and comment the TweenMax.set() on line 32-33 in the javascript panel. PS: the real timeline is very complicated that's why I'd like to play reverse rather then creating another timeline with the opposite actions Thanks in advance
-
After Reading through some topics in the forum and on codepen, I try to do a "filter:drop-shadow(...)" animation on a CSS filter that is supposed to take effect on the SVG, using the onupdate() and TweenMax.set() methods. Unfortunately unsuccessfully so far. The included codepen shows the basic animation: 1. first an animation over opacity and scale, then 2. the "onUpdate -> set" animation, which is, where the magic should happen. There are 2 debug helper functions that throw out some values to the console. And they seem to proof that the values for the shadow distance and the color opacity ( in var logoFilterAmount) are calculated correctly over the course of the animation, but the final result (using getComputedStyle to check) shows strange numbers that I can't explain to myself how they were created. Any insight here would be most welcome! Thank you!
-
Hey everyone , I post this not so much as a problem, since the solution is easy, but more as a curiosity and a bit of help to anyone else that may see this nested timeline behavior. I’ve created a master timeline via four nested timelines in functions. The first timeline tween of each nested timeline is a set() call. On the first pass through the master timeline, each nested set() at time zero fires at time zero of the master timeline – not time zero of the local timeline. This is easily corrected by applying immediateRender:false to the set() calls. My guess is that when the master timeline is created, all the set()s at position zero of the nested timelines are fired as they become relative to the master timeline of zero? @ Jack – I won’t even pretend to understand many of the things under the hood, but I was reading this post in which you said: 'That's one of the reasons we have the "set()" convenience method in TimelineLite and TimelineMax - it creates a zero-duration tween but it automatically sets immediateRender:false unless you're inserting it at the current time.' I totally understand that and the first set() of the first nested timeline is essentially at time zero of the master timeline so it should and does fire immediately, but I’m mostly curious about why the repeats of the master timeline all play as one might expect – each nested set() at local time zero wait their turn without having to apply an immediateRender of false. At any rate, this is not too big of a deal and easily solved by explicitly setting the immediate render . As I said, it’s more curiosity and for any future forum searchers with questions about it.
-
Hey guys! I have a div with text placed inside a container with a flexible width which means that depending on the screen width the height of the div will change. I would like to tween the height and alpha so that they start at height: 0px and autoAlpha:0 and on click the height increases to 100% of the text as it fades in. The provided example is part of a much larger timeline in my project and all other aspects of my gsap code are working great. I have read through other demonstrations using the set property, but I have not seen this working with TimelineMax, only with TweenMax. Is there something else I need to do to get my text container to start at 0 and tween to auto? Much appreciated!
