picitelli

Jack, thank you for your prompt response. Instead of killing the old timeline on resize and creating a new one, is there a method I can use to "update" or "re-render" a timeline I've already defined?

Is it possible to re-draw/update a timeline after a window resize event has fired? I have a timeline animation that animates the widths and heights of elements from 0 to their set CSS values (e.g. 50%, 100%). Using TweenMax.from, I am able to accomplish what I need. And since my CSS values are percentage based, this works for all device widths on initial load. Once I resize, those values that were calculated on initial load are stored and not re-run. I am looking for a way to update the values that are assigned for the TweenMax.from after a resize event has fired. Is that possible? I can provide a code example if needed. // animations controller var animationsController = new ScrollMagic(); // scene 1 animations var scene1Animations = new TimelineMax() .add([ TweenMax.from('.line--1', .5, { height: 0 }) ]) .add([ TweenMax.from('.line--2', 1, { width: 0 }) ]) .add([ TweenMax.from('.line--3', 1, { height: 0 }) ]) .add([ TweenMax.from('.line--4', 1, { width: 0 }) ]) .add([ TweenMax.from('.line--5', 1, { height: 0 }) ]) // scene 1 var heroEl = $('.hero'), scene1El = $('.scene--1'), scene1Scene = new ScrollScene({ triggerHook: 'onCenter', triggerElement: scene1El, duration: $(window).height(); }) .setTween(scene1Animations) .addTo(animationsController); // update on resize $(window).on('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function() { // update scene 1 scene1Scene.duration($(window).height()); scene1Scene.setTween(scene1Animations); // need a way to update }, 250); });

Yes, it does help. Thank you for your quick response!

I've been playing around with TweenMax, using Scroll Magic JS plugin, and have yet to find a working example of an animation, where the element that will be animated, has initial CSS that is absolutely positioned to the right and bottom, come in from the right of the screen. CSS wise, I only see animations that use x (left) and y (top) coordinates. Is it possible to get an animation to come in from the right side of the screen? If so, can someone please point me to an example.