wondergryphon

Thanks @Carl. I dont think my question relates particularly to scrollmagic. It's more a 'scroll jacking' method that most of these sites seem to use. IE instead of scrolling the body, they're scrolling elements within a div by means of `translate` positioning. This seems to be the common method that is used to achieve this smooth scrolling and my question is how to achieve that level of functionality i guess

Hi forum. Apologies if this has been asked + answered before... I've tried heaps of Googling on the topic but I can't seem to find out these guys have achieved this effect. http://www.soyuzcoffee.com/en/home ☝️ From what I can see on this (and other) sites, instead of actually scrolling the body, they have a wrapping div which has `overflow: hidden;overflow-y: scroll;` applied. Then the elements within that wrapping div are all absolutely positioned and the scroll event changes the position of that element. In the example above, its absolute positioning and the setting of 'top' values. However on other sites (and probably the route I'll want to go), it'll be `transform:translate()` values which get adjusted. Site's that use _this_ method, have an amazing smooth scroll. ? Ultimately, this is my goal. So far in my efforts, when I apply even the simplest parallax scroll onto a site, I get noticeable jank. But on sites like the above, that method, combined with GSAP/TweenMax/Scrollmagic, seems to achieve a buttery smooth scroll. Would really appreciate some pointers (either in code snippets, or to existing resources that document the processes to achieve this) from anyone here. Thanks kindly :)

Amazing. Truly appreciate your help kind sir I'll pop a URL here when the final result is live soon #touchwood

Thanks so much @Dipscom. I was busy playing with a `staggerTo` when I saw your reply - which has gotten me closer than I've been all morning, so thanks for that Only adjustment that's needed, is a bit of an overlap (which is why I was looking at stagger). IE that as the first element is fading out, the next element is already fading in so there's a period where both are visible. Is that possible with your method, or would the stagger function be better?

Hey guys Sorry for no codepen demo as I'm working on a large website and couldn't just extract the bits for the sake of a demo. Hopefully the screenshots + gifs will suffice. Scenario: I have a pinned section that sequentially shows + hides 2 elements as you scroll. When you scroll to the element initially, they should be hidden and then fade in and out again until the element is unpinned. Problem: Both elements are initially visible and overlapping each other when the page first loads. If i scroll down the page and run through the animation, and then scroll back up again, the animation ONLY THEN works correctly. So it's as if the final state of the animation is setting it correctly, but I can't seem to set it up to do that from the get go. Some Gifs: The problem: http://i.imgur.com/QVPga7u.mp4 How it should be: http://i.imgur.com/0zKVUo8.mp4 (note this happens once I've scrolled down and then back to the top again) The Javascript TweenMax.set(".infographic-text-wrapper", { opacity: 0, scale: .9 }); // this has no effect var controller = new ScrollMagic.Controller(); // tween var tween = new TimelineMax() .fromTo('.infographic-text-wrapper-1', 1, { opacity: 0, scale: .9 }, { opacity: 1, scale: 1 }) .fromTo('.infographic-text-wrapper-1', 1, { opacity: 1, scale: 1 }, { opacity: 0, scale: .9 }) .fromTo('.infographic-text-wrapper-2', 1, { opacity: 0, scale: .9 }, { opacity: 1, scale: 1 }) .fromTo('.infographic-text-wrapper-2', 1, { opacity: 1, scale: 1 }, { opacity: 0, scale: .9 }) // scene var scene = new ScrollMagic.Scene({ triggerElement: "#what-we-offer", triggerHook: 'onLeave', triggerOffset: 800, duration: 3000, offset: -150 }) .setPin("#what-we-offer") .setTween(tween) .addTo(controller); The CSS And then the CSS used to set the initial state (although this doesn't seem to have any effect) .infographic-text-wrapper { position: absolute; top: 0; left: 0; opacity: 0; transform:scale(.9); } Final note is that I have tried the suggestions on this page, but to no avail. So frustrated and the lack of google search results on the page mean I'm probably being really stupid, but at this point I would welcome any help I can get...