melissa

Thanks a lot to both of you! Makes a lot of sense. I'll make sure to upload CodePens going forward. Have a nice day Melissa

Are you suggesting recalling the timeline every time the window is resized? I'm concerned about the performance implications of that. Also, I'm not really seeing what this has to do with my example. Can you demo with the example I provided please? Or something closer, with a timeline and a click event? Thanks! Melissa

How would I go about doing that considering it is part of a nested timeline? This is a rough example of what my setup is like: function generateValue() { var value; // if window is smaller than 520px if (Modernizr.mq('(max-width: 520px)')) { value = $window.width(); } else { value = 420; } return value; } function createTimelineOne() { var tl = new TimelineMax({ paused: true }); tl .to($myElement, .3, {x: generateValue}) .to($myElement2, .2, {x: generateValue}); return tl.play(); } var timelineOne = createTimelineOne(); var masterTL = new TimelineMax({ paused: true }); masterTL .add(timelineOne); function playTimeline() { masterTL.play(); } $myButton.on('click', playTimeline);

Basically, every time a tween is called in my timeline, I want to recheck the value to be tweened by. `generateValue` seems to be only called once. When I resize the window every time the tween is called it uses the value it first generated. Help would be very much appreciated! function generateValue() { var value; // if window is smaller than 520px if (Modernizr.mq('(max-width: 520px)')) { value = $window.width(); } else { value = 420; } return value; } TweenMax.to($myElement, .2, [x: generateValue});

Hi everyone! Thanks a lot for the help - CodePen video is super useful. Will use it going forwards As for the immediateRender: false, that fixed my problem! Thanks so much, @PointC

Hi everyone, I'm hoping you can help me. I'm putting together an animation of a play button. Everything works fine on mouseenter and mouseleave, but my problem is, the SVG is not rendered on page load. The circle, that is. What I tried: When I removed `.fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut})` from my timeline, the bug disappeared. For some reason, the drawSVG of 100% 100% seems to be applied to the svg even though the timeline is paused? Timeline.progress has not worked, but clearProps: drawSVG did fix it (although obviously I can't clear the drawSVG on init). Any help would be hugely appreciated. Thanks! PS. Sorry a codepen isn't included. I don't have a PRO account so I couldnt upload GSAP to it. LMK if you'd still like me to create it if it makes it easier for you to debug. $playButton.each(function (index, elem) { $this = $(this); var $circle = $this.find('#play-icon__circle'); var $caret = $this.find('#play-icon__caret'); TweenMax.set($caret, {transformOrigin:"50% 50%", scale: 1}); TweenMax.set($circle, {opacity: 1, rotation: "-90", transformOrigin:"50% 50%"}); var playButtonTimeline = new TimelineMax({paused: true}); playButtonTimeline .fromTo($circle, .3, {drawSVG: 'true', opacity: 1}, {opacity: .5, drawSVG: '100% 100%', ease: Expo.EaseOut}) .set($circle, {rotationX: -180}) .fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut}) .to($caret, .2, {scale: .7, ease: Expo.EaseOut}, '-=.4'); $this .mouseenter(function () { if(playButtonTimeline.isActive()){ e.preventDefault(); e.stopImmediatePropagation(); return false; } playButtonTimeline.play(0); }) .mouseleave(function () { if(playButtonTimeline.isActive()){ e.preventDefault(); e.stopImmediatePropagation(); return false; } playButtonTimeline.reverse(0); }); });