tobiasger

It's because the image in the div has a higher height than the viewport. So it's a way to make the image first "cover" the screen, and then when the z axis is animated to make the image smaller, the whole image shows. It gets cropped by the window edges in the beginning, basically. If I remove the top and left values from the CSS, the div would be placed at the top instead of the center of the screen, which would make the div not being centered when applying the z transform.

Thank you so much Sahil! This is not really because of GSAP, but any idea why the transform origin is not in the center of the div having the z axis animated in IE 11? It scales down from the bottom right corner. Even if I set the transformOrigin: 50% 50% on the div. Any ideas on how to make it transform from the center on IE 11?

I'm trying to set an element with TweenMax.set() and assign the values of {x: "-50%", y: "-50%" } to it in order to center it with additional top: 50% and left: 50% values in CSS. I then want the z axis to animate from that in the timeline, but it seems to ignore that value and is having trouble maybe to merge the set values to the new values in the timeline. Am I doing something wrong here? The x and y values should be constant throughout the whole animation. It's only the z axis animation that I want to add to this in the timeline.

Thank you so much! Exactly what I wanted.

Thanks for your answer! Would I have to call something inside the scroll event? If you take a look at my CodePen above, how would you implement it?

Or maybe this isn't possible?

Yes, sorry. This is how I'm doing it: Although the other solution in the forum post that you provided is neat, it doesn't really work with my example since the animation is happening in the fixed #holder div. In other words, the page can't be "scrolled" with a translate animation as the content being animated is contained within a fixed div. So basically the options I see is either smoothing/easing the scroll movement itself, by jacking the scroll – or (the method I'm asking for) to ease the changes of the progress value of the Timeline based on the scroll position, so I don't have to manipulate the scroll behaviour per se.

Thank you so much!

I'm doing a Timeline that gets run by scrolling the page, updating the Timeline progress depending on scroll position. I noticed that some transitions in Safari were really choppy and tried to optimize it. First off, changing opacity transitions from opacity: 1 or opacity: 0 to opacity: 0.999 and opacity: 0.001 seems to solve the jerkiness a lot. I read this on this forum and it seems to be a confirmed solution for optimizing in some browsers. But one other thing that I noticed was that if I scroll through the whole site once and then back up, scrolling the site downwards again manually makes the animations run smoother. Almost like if Safari wants to see and execute the animations first before running them smoothly the next time. So I added this ugly hack just to try it out: $(window).on("load", function () { $("html, body").animate({ scrollTop: $(document).height() }, 10); setTimeout(function () { $("html, body").animate({ scrollTop: 0 }, 10); }, 10); }) And doing this before I begin to scroll manually, the animations are noticeably smoother than if I were to scroll it from the top without scrolling to the bottom first. I don't know why I'm telling you this, but have this been noticed and confirmed to work before? Does it have to do with caching of the values or what?

I've read some topics on the forum about this, but they had some dead links, so that's why I'm asking this again. I have this script that listens to the scroll event and then "scrolls through" the Timeline progress depending on the mouse position. It's working great, especially on my MacBook Pro that has built-in inertia/momentum to the trackpad. What I would like to do is to add some kind of smoothing or easing to the progress value, so that it's eases from the last value to the next on scroll, or whatever method that would work best. This is the script I'm using: $window.on("scroll", function () { var documentHeight = $(document).height(); var windowHeight = $window.height(); scrollTop = $(window).scrollTop(); var scrollPercent = Math.max((scrollTop) / (documentHeight - windowHeight), 0); timeline.progress(scrollPercent).pause() }); Any idea on how to implement easing to the progress change? I've tried to use this script below for smoothing out the mouse movement overall, but somethings tells me that changing the progress change instead of the scroll movement itself would be better/more performant? Especially if they both are called on the same scroll event. Maybe someone have some best practice advise for this. function smoothScroll() { var a = $(window); a.on("mousewheel DOMMouseScroll", function (b) { b.preventDefault(); b = b.originalEvent.wheelDelta / 120 || -b.originalEvent.detail / 3; b = a.scrollTop() - parseInt(400 * b); TweenMax.to(a, 1.1, { scrollTo: { y: b, autoKill: !0 }, ease: Power1.easeOut, overwrite: 5 }) }) }

Okay, so the trick is to first collect the timelines in an array, then add them to a separate timeline and then add that separate timeline to the main timeline? Basically doing like this, considering my code above?: var slides1 = createSlides("scene1"); var slides1Tl = new TimelineMax().add(slides1); var timeline = new TimelineMax() .to(element, slides1Tl.totalDuration(), { ... }, "scene1Slides") .add(slides1Tl, "scene1Slides")

How would I go about getting the total duration of all timelines in an array? I have a function that looks like this: function createSlides(scene) { var slides = []; $("#" + scene + " .slide").each(function (i, element) { var tl = new TimelineMax({ delay: i * 4 }); if ($(this).hasClass("image")) { tl.to(element, 1, { className: "-=pointer-events-none" }) if ($(this).hasClass("packshot")) { tl.to(element, 1, { opacity: 0.999, scale: 0.95, force3D: true }) tl.to(element, 2, { scale: 1, force3D: true }) tl.to(element, 1, { opacity: 0, scale: 1.05, force3D: true }) } else { tl.to(element, 1, { opacity: 0.999, scale: 1, force3D: true }) tl.to(element, 2, { scale: 1.2, force3D: true }) tl.to(element, 1, { opacity: 0, scale: 1.3, force3D: true }) } tl.to(element, 1, { className: "+=pointer-events-none" }) } else { tl.to(element, 1, { className: "-=pointer-events-none" }) tl.to(element, 1, { opacity: 0.999, force3D: true }) tl.to(element, 1, { opacity: 0, force3D: true, delay: 2 }) tl.to(element, 1, { className: "+=pointer-events-none" }) } slides.push(tl); }) return slides; } I then add this array of timelines to the master timeline like this: var slides1 = createSlides("scene1"); var timeline = new TimelineMax() .add(slides1, "scene1Slides"); I now want another animation, a to(), to start and finish at the same time as these timelines in the array. So starting at the "scene1Slides" label and then going for the same amount of time as all the timeline's total duration. How would I do this?

Sorry, I totally misunderstood how ScrollMagic works. The duration is set by the duration setting in ScrollMagic, that expands the scroll area so that the animations take more time to complete. So this was solved!

I'm using TimelineMax with ScrollMagic. I'm aware that this might be something that this forum can't answer, if it's an issue with ScrollMagic, but something tells me that this question applies to how GSAP works rather than ScrollMagic. Please tell me if I'm wrong. I have created a timeline that runs when the user scrolls, obviously. I'm adding my tweens like this: var timeline = new TimelineMax() .to("#scene1", 0.5, { z: "200%" }, "scene1") .to("#butterfly", 1, { css: { bezier: butterflyFlightpath.entry } }, "scene1+=0.25") .add(butterflyTween, "scene1") .staggerTo("#scene1 .image", 1, { css: { opacity: 1 } }, 4, "scene2") .staggerTo("#scene1 .image", 1, { css: { opacity: 0 } }, 4) The code for the variable butterflyTween looks like this: var butterflyTween = TweenMax.to(butterflyObj, 0.1, { curImg: butterflyImages.length - 1, roundProps: "curImg", repeat: "100%", immediateRender: true, ease: Linear.easeNone, onUpdate: function () { $("#butterfly").attr("src", butterflyImages[butterflyObj.curImg]) } }) This tween is changing the image sequence of the image that is #butterfly, so that it's wings are flapping when being animated using a bezier curve across the screen. The variable butterflyFlightpath looks like this: var butterflyFlightpath = { entry: { curviness: 1.25, autoRotate: true, values: [ { x: 100, y: -20 }, { x: 300, y: 10 }, { x: 410, y: 40 }, { x: 540, y: 20 }, { x: 570, y: 20 }, { x: 620, y: 15 }, { x: 660, y: 20 }, { x: 800, y: 130 }, { x: $(window).width() + $("#butterfly").width(), y: -100 }, ] }, }; The problem I'm experiencing is when I add the staggerTo(). As there are a couple of images being staggered by this, their total duration becomes a few seconds. This seams to affect the duration of the butterfly animation. Not the image sequence animation, but the movement animation set by the bezier. It becomes very fast the longer the staggering animation is. Maybe I'm missing something, but how would I get the duration of each animation to be consistent, regardless of the total duration of the whole timeline changing? Do I have to change the duration attribute with ScrollMagic the more I add, or is there any other way?

Thank you so much for the help! Really helped me understand the way it works.