darkgr33n

ignore that, it doesn't work as you needed. apologies

A quick update. I implemented the changes above across the site, with smooth scrolling and various combinations of "components" and everything is working pretty damn well!! ? Thanks both for your help, much appreciated Cheers!

@GreenSock@ZachSaucier Thanks Both! I had considered the unique ID point previously, but had somehow forgotten the basics during the hunt for what was wrong!! Many thanks, and love the ST array idea; I'll definitely use that going forward. Quick coffee, then I'll implement. Cheers!

Thanks Zach, I did try to kill of the ScrollTrigger but struggled a bit. I can't use ScrollTrigger.getAll(); as there are other triggers I don't want to destroy. In the end, i've used ScrollTrigger.getById('cmpnt__ps').kill(); in the example (on the real page I'll have to list each trigger by ID, but there are only four). I've trimmed the HTML/JS/CSS a bit too! https://codepen.io/darkgr33n/pen/bGwwKme But i'm still getting the same problem unfortunately. Perhaps I'm not killing the trigger correctly ? I wrapped it in a block to stop the undefined error, so: if (ScrollTrigger.getById('cmpnt__ps')) { } and that seems to fire correctly - ie not on first load but after an orientation change. does the killing look right ? Cheers!

Not sure if this helps, and I'm also not sure of how the durations are generated, but this kind of thing seems to work on initial test: let dur_green = 4, dur_orange = 2, dur_grey = 3; tl.to(".green", { x: 200, duration: dur_green }); tl.to(".orange", { x: 200, duration: dur_orange }, '>' + dur_orange - dur_green ); tl.to(".grey", { x: 200, duration: dur_grey }, '>' + dur_grey - dur_orange); initially, I had the dur_ variables set to 3, 1 and 2 respectively as per your example. changed to 4,2 and 3 and the end times are still aligned. although, on re-reading your post, perhaps this falls into the not-so-elegant category ...

Thanks Zach, good shout. I've removed ASScroll and some of the styling. I think I'm only left with relevant bits I'd been looking at dev tools, and one difference I could see was within the pin-spacing attributes, but I hadn't looked too closely as I assumed that was a symptom of me doing something stupid! As it would appear on first look that I'm not doing anything obviously wrong, I can see that when the orientation fires and rebuild the spacing, it seems to miss the padding on the pin-spacer class. The declared height is always off by the missing padding amount. An updated demo without scrolling is here: https://codepen.io/darkgr33n/pen/KKggWWj I've run through two test cycles, one for each (landscape/portrait), beginning with an initial reload in one orientation, then doing the rotation, and then rotating back again. I don't know if it's helpful, but the code below shows the differences on each test cycle (and i've removed all other code not affected, so its just the initial few classes). <!-- LANDSCAPE TEST (667 x 375) Initial reload --> <div class="container-fluid"> <div class="pin-spacer pin-spacer-cmpnt__ps" style="float: none; flex-shrink: 1; display: flex; margin: 0px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 650px; height: 736px; padding: 0px 0px 260px;"> <div class="row cmpnt--page-split" style="transform: translate3d(0px, 0px, 0px); inset: 0px auto auto 0px; margin: 0px; max-width: 650px; width: 650px; max-height: 475.5px; height: 475.5px; padding: 0px;"> <div class="col-7 p-0 all-vh cmpnt--page-split--image"> <img src="https://picsum.photos/600/800?random=5" width="600" height="540" class="ps__image--one" style=""> <img src="https://picsum.photos/600/800?random=6" width="600" height="540" class="ps__image--two" style="transform: translate(0%, 100%);"> </div> <!-- *ROTATE* to portrait (375 x 667) --> <div class="container-fluid"> <div class="pin-spacer pin-spacer-cmpnt__ps" style="float: none; flex-shrink: 1; display: flex; margin: 0px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 358px; height: 771px; padding: 0px;"> <div class="row cmpnt--page-split" style="transform: translate3d(0px, 0px, 0px); left: 0px; top: 0px; margin: 0px; max-width: 358px; width: 358px; max-height: 771px; height: 771px; padding: 0px; box-sizing: border-box; position: fixed;"> <div class="col-7 p-0 all-vh cmpnt--page-split--image"> <img src="https://picsum.photos/600/800?random=5" width="600" height="540" class="ps__image--one" style=""> <img src="https://picsum.photos/600/800?random=6" width="600" height="540" class="ps__image--two" style="transform: translate(0%, 47.1429%) translate3d(0px, 0px, 0px);"> </div> <!-- *ROTATE* back to landscape (667 x 375) --> <div class="container-fluid"> <div class="pin-spacer pin-spacer-cmpnt__ps" style="float: none; flex-shrink: 1; display: flex; margin: 0px -15px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 680px; height: 529px; padding: 0px;"> <div class="row cmpnt--page-split " style="transform: translate3d(0px, 0px, 0px); inset: 0px auto auto 0px; margin: 0px; max-width: 650px; width: 650px; max-height: 505.531px; height: 505.531px; padding: 0px;"> <div class="col-7 p-0 all-vh cmpnt--page-split--image"> <img src="https://picsum.photos/600/800?random=5" width="600" height="540" class="ps__image--one" style=""> <img src="https://picsum.photos/600/800?random=6" width="600" height="540" class="ps__image--two" style="transform: translate(0%, 100%);"> </div> <!-- PORTRAIT TEST (375 x 667) Initial reload --> <div class="container-fluid"> <div class="pin-spacer pin-spacer-cmpnt__ps" style="float: none; flex-shrink: 1; display: flex; margin: 0px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 358px; height: 1056px; padding: 0px 0px 285px;"> <div class="row cmpnt--page-split" style="transform: translate3d(0px, 0px, 0px); inset: 0px auto auto 0px; margin: 0px; max-width: 358px; width: 358px; max-height: 770.594px; height: 770.594px; padding: 0px;"> <div class="col-7 p-0 all-vh cmpnt--page-split--image"> <img src="https://picsum.photos/600/800?random=5" width="600" height="540" class="ps__image--one" style=""> <img src="https://picsum.photos/600/800?random=6" width="600" height="540" class="ps__image--two" style="transform: translate(0%, 100%);"> </div> <!-- *ROTATE* to landscape (667 x 375) --> <div class="container-fluid"> <div class="pin-spacer pin-spacer-cmpnt__ps" style="float: none; flex-shrink: 1; display: flex; margin: 0px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 650px; height: 476px; padding: 0px;"> <div class="row cmpnt--page-split" style="transform: translate3d(0px, 681px, 0px); inset: 0px auto auto 0px; margin: 0px; max-width: 650px; width: 650px; max-height: 475.5px; height: 475.5px; padding: 0px;"> <div class="col-7 p-0 all-vh cmpnt--page-split--image"> <img src="https://picsum.photos/600/800?random=5" width="600" height="540" class="ps__image--one" style=""> <img src="https://picsum.photos/600/800?random=6" width="600" height="540" class="ps__image--two" style="transform: translate(0%, 100%);"> </div> <!-- *ROTATE* back to portrait (375 x 667) --> <div class="container-fluid"> <div class="pin-spacer pin-spacer-cmpnt__ps" style="float: none; flex-shrink: 1; display: flex; margin: 0px -15px; inset: auto; position: relative; overflow: visible; box-sizing: border-box; width: 388px; height: 614px; padding: 0px;"> <div class="row cmpnt--page-split " style="transform: translate3d(0px, 0px, 0px); inset: 0px auto auto 0px; margin: 0px; max-width: 358px; width: 358px; max-height: 614px; height: 614px; padding: 0px;"> <div class="col-7 p-0 all-vh cmpnt--page-split--image"> <img src="https://picsum.photos/600/800?random=5" width="600" height="540" class="ps__image--one" style=""> <img src="https://picsum.photos/600/800?random=6" width="600" height="540" class="ps__image--two" style="transform: translate(0%, 100%);"> </div> That seems like a lot to look at! In essence, taking the landscape test as an example, what I'm seeing is that: on initial reload <div class="pin-spacer has width: 650px; height: 736px; padding: 0px 0px 260px;" on first rotation to portrait: <div class="pin-spacer has width: 358px; height: 771px; padding: 0px;" on second rotation back to landscape: <div class="pin-spacer has width: 680px; height: 529px; padding: 0px;" I guess i'm expecting that rotating back to landscape (assuming i'm rebuilding the triggers correctly) it should be the same. Finally, looking at the portrait version I can see the pin-spacer above (first rotation) is different to how it appears on initial reload: portrait on initial reload <div class="pin-spacer has width: 358px; height: 1056px; padding: 0px 0px 285px;" so I can see on initial reload (which works) height is 1056px with the 285 bottom padding, but if we rotate from landscape into portrait, there is no bottom padding added and so the height is off by that amount. Maybe it's the way I'm handling the rotation, but the pin spacing seems to be different each time and i have no idea why!! Cheers!

Hey all, I'm trying to cope with orientation changes. On a reload everything works as expected, but on an orientation change, not so much. I've read through a fair few examples, and have tweaked my code after reading @ZachSaucier 's animating efficiently, but to no avail. The real page has a number of components, but the codepen demo just shows one to try and keep the code minimal. There can be any number of these components, in any position on the page, so I basically loop through the <section> tags and see what class "component" they hold, and then build the scroll trigger then and there so they're always built in order. The orientation function seems to be firing correctly. I've tried a number of different methods to kill the trigger, clearProps etc, but can't see where I'm going wrong. Any ideas on what I can do to try and make sure the triggers are built afresh after an orientation change ? Cheers!

excellent!! Thanks for your help Zach

Thanks for the quick reply Zach -- I only realised as I got to the end of the question! OK, so I can get it to work if I do this: ScrollTrigger.matchMedia({ // please don't touch "(pointer: fine)": function() { ScrollTrigger.defaults({ scroller: '.inner' }) } }); Does that seem reasonable ? The whole ASScroll call now being: // ASScroll var asscroll = new ASScroll.default({ customScrollbar: true, disableOnTouch: true, scrollbarHandleEl: '.my-scrollbar-handle', disableNativeScrollbar: true }); ScrollTrigger.matchMedia({ // please don't touch "(pointer: fine)": function() { ScrollTrigger.defaults({ scroller: '.inner' }) } }); ScrollTrigger.scrollerProxy(".inner", { scrollTop(value) { return arguments.length ? asscroll.scrollTo(value) : -asscroll.smoothScrollPos; }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight } } }); asscroll.on("raf", ScrollTrigger.update); ScrollTrigger.addEventListener("refresh", () => asscroll.onResize()); window.addEventListener("load", () => { var totalScroll = document.querySelector(".asscroll-container").scrollHeight - innerHeight; asscroll.enable(false, true, document.querySelector(".inner")); }); Cheers!

Hey all (again!), I'm almost there (I think I said that about a month ago!), but have a small issue that I can't fathom. I've created two codepen demo's, but one could suffice if you comment out the necessary code between the <!-- ASScroll --> comments My issue only happens on touch devices. Chrome emulator seems to show the error, but I'm also on an iPhone which behaves the same each time. *note -- i'm only looking at landscape view at the moment -- not portrait. On desktop, everything is hunky dory, however on mobile screens the pinning isn't happening. When I set markers:true, I can see that the markers on the scroller move up with the page. I've setup ASScroll as per the demo, it's the same code, however I'm unsure if I need to create a proxy for every other Scroll Trigger instance as well (the demo shows just one component, but there are several, each with a different animation). https://codepen.io/darkgr33n/pen/XWjXGjJ the above demo (which seems to be at the bottom of the post for some reason !!) has ASScroll code intact. If you comment out the <!-- ASScroll--> section upi can see the effect -- or use this demo without ASScroll which works fine on mobile: https://codepen.io/darkgr33n/pen/ExgPMRg all other code is exactly the same in the two demos . When I first initiate ASScroll, I'm setting the DisableOnTouch opiton as "true" - which is the default - so I'm assuming that, on touch devices, ASScroll is not initiated. In my head, I'm thinking that means it should all work exactly as it would if ASScroll was not there - as per the second demo - however, as I've been typing this question, I've just realised that, although ASScroll may not be being initiated on mobile, I'm still setting the ScrollTrigger default scroller to ".inner", and setting up the proxy, and I have no idea if it's that breaking things on mobile, or a totally unrelated (and hopefully quick to fix) issue If anyone is able to point me in the right direction that would be very much appreciated. It could be as ASScroll issue but as it's working so beautifully on desktop I hope it's an easy fix! Cheers!

oops. it's the demo totem referenced - although there are a few on that page! This one in particular: https://codepen.io/osublake/pen/fe1e511b8505fa9d75d4d9c3cb866f7d I can't fork it, hence the line numbers above. As I said, it's not a solution but might help in the journey!

A very quick and dirty way to get that affect using the demo you linked to, would be just to amend line 21/22 to: // Event coords var x = vw/2; var y = vh/2; which is just the centre of the viewport based on the variables set earlier in the code - then the circle comes from the centre of the viewport at all clicks. you may be able to then remove the other bits you don't need. as I said, quick and dirty.

I have looked at a few questions over the last couple of weeks, but haven't been able to answer any yet, but will continue to look as it's also really great learning

Thanks for the additional confirmation as well!! All appears to work fine now, many many thanks. Would you believe I had it like that to begin with, but as part of my attempts to fix the original issue, I had moved all the variable inits outside of the function ? I'd definitely call it brilliant and I'm sticking to that! I would still be struggling now without your help -- and I'm also learning a lot more working with scroll trigger, but more importantly, the community. Who knows, one day I may be able to help out someone too, that would good. Cheers!

Hey @akapowl Many thanks for your help once again!! That's brilliant; I hadn't yet thought that far I've tinkered with JS for about 15 years but never really mastered it. I'll make those changes in the morning and report back when its fixed Thanks for your time looking at this, much appreciated. Cheers!

yeah it does seem that when the first component is translating the first image, it is also effecting the second instance of the component -- at the point when the first instance of the component should unpins, it then moves the second components second image up before the scroll actually continues I'm looping through each <section> tag and then selecting the image using section., so i assumed it would be specific to the element within it's parent, but i've obviously missed something ... // LOOP through the <section> tags gsap.utils.toArray("section").forEach(function(section) { if (section.querySelector('.cmpnt--image-coverup') !== null) { // the <section> contains an element with the class cmpnt--image-coverup so set up the images imageTwo = section.querySelector(".ic__image--two"); ---rest of code--- } });

I spoke a little too soon! I think it needs a little tweak; because i was using random stock images I didn't pick up on it ? https://codepen.io/darkgr33n/pen/ExgamYj In demo, the first instance of both of the two components works fine; however, in both of the second instances of the components, the second image - which should scroll from the bottom over the top of the first image - is initially in view until the first image is pinned, and then it works as expected. Something in the first instance of each component is adding something extra to the second instance, i'm not sure if its the pin-spacing or if it's a result of the some kind of timeline issue. I've just re-read the most common mistakes, and can't see anything obvious - but i'm almost sure it is. Like, setting the timeline to from(yPercent:100) is actually doubling on the second instance of the components. Just in case anyone has spotted the error, I thought I'd reach out while I continue the struggle Cheers!

ok, I think I've managed to make it work, although I'm not sure on its efficiency. https://codepen.io/darkgr33n/pen/ExgamYj I first looked at traversing the page via the parent section tags, building an array of each instance of the classnames I needed and then I was going to step through the array and do something : var cmpnt__list = []; // LOOP THROUGH EACH SECTION ELEMENT. $('section').each(function () { if (this.querySelector('.cmpnt--page-split') !== null) { cmpnt__list.push("cmpnt--page--split"); } if (this.querySelector('.cmpnt--image-coverup') !== null) { cmpnt__list.push("cmpnt--image-coverup"); } }); ....but it just seemed overcomplicated and I wasn't really sure what to do with the array after i'd got it. In the end, rather than using my two gsap.utils.toArray , one for each component, I used the toArray on the parent <section> tags, and then look to see if they contain any of the classnames i'm looking for, and if it does, i create the scroll trigger right there, so it's always in the correct order. I'm sure i can optimise a little more but, for now, it seems to be working Many thanks for your help Cheers!

thinking out loud, as I won't know what order the components might be in, I can't set the refreshPriority beforehand, so I'll need to create something to look through the page and grab all possible components and then set the refreshPrioirty of each scrollTrigger according to the order so I think will need to look at the scrollTrigger.sort method. I think there are three or maybe four different components that I need to build, and sometimes one component may appear more than once.

@akapowl Thanks for that, I must admit I hadn't looked for a solution within the docs, I just assumed I was doing something really stupid. I would have thought what I was doing - creating reusable functions - would have been reasonably standard, but perhaps the "in any order on the page" is the uncommon thing here - but I'm glad I'm not a million miles away with my approach! I'll give what you suggested a go and report back. I could see it was something to do with the pin-spacing but couldn't quite work out where it was going wrong. Thanks again for your time

Hey all, I'm stuck on an issue and just can't for the life of me work out what's going on. I've created a cut-down version of one of my pages to illustrate. So, I have about 10 pages. Each page can have a number of 'components'. Each of these components have a variation on a basic wipe animation. I have one js file, which I'm including in each page, and the basic idea is: we look at the page and see which, if any, of the components we have, and then set up the page accordingly. I'm using gsap.utils.onArray to look through the page and see if there is one or more named components: gsap.utils.toArray(".cmpnt--page-split").forEach(function(ps__section) { The two components shown in the codepen demo i've called 'page split' and 'image coverup'. As it currently stands, it works fine. I even celebrated with a cup of tea. However, one of my pages needs to have these components in a different order. so I swapped the order in the HTML and the thing went bonkers ? If you look at the codepen that works, in the HTML there are three components, the first of which is commented out for demo purposes <!-- # IMAGE COVERUP COMPONENT --> <!-- PAGE SPLIT COMPONENT --> <!-- IMAGE COVERUP COMPONENT --> however, if you uncomment the first IMAGE COVERUP and comment-out the last one, when you run it again all hell breaks loose when it tries to deal with the PAGE SPLIT component. I'm not sure if its the way I'm using gsap.utils.toArray because if the order of the components in HTML matches the order in of the utilsonArray in the JS, it works, otherwise ... it don't. And I can't work out how its breaking. I think I'm missing something really obvious, but am at a loss at the moment. Any idea what I'm doing wrong ? Cheers

that makes sense - thanks Zach

Hey Zach, Superb! That's exactly the effect I was looking for -- and has also given me a couple of new pointers for the future too. It makes total sense - I wasn't aware you could a) attach a tween to the onEnter/onLeaveBack calls in that way and b) hadn't properly grasped the impact/usage of the "overwrite:true" prop to kill the tween either. I'll make sure I do some reading around that one Many thanks (again!). Cheers!

Hey everyone, I've had a few days away from GSAP and seem to have lost what little knowledge I had gained o.O I think this should be relatively simple but I seem to be struggling to visualize what's happening. What I'm trying to achieve on my .wrapper element is: Split Text staggers in from 0 opacity. ☑ done element waits 5 seconds and fades out over 2 seconds ☑ done As you start to scroll down the page, element fades back in over 1 second ☑ done continue to scroll down the page as normal then, when you scroll back up the page - the element should still be visible from #3. when you reach the top of the viewport, element should wait 5 seconds and then fade out over 2 seconds (same as in #2) I've tried a number of variations but am clearly struggling. I know I need to be able to deal with things like people scrolling down the page before the initial animation has finished etc, but i'm obviously not correctly using the onEnter, onEnterBack etc, and at some points had the element hidden due to the initial settings. I've tried manipulating one timeline, but the current pen has an initial timeline for the split-text coming in, and then fading out -- and then an additional timeline for the quick fade-in and another one for the longer fade-out when you hit the top of the viewport again. I had it working when the toggle actions were a simple play and reverse when you come back in the viewport, but by adding the extra timelines to create the different durations and pause I seem to have fallen down a bit of a rabbit hole ... I've read through the docs and a few posts but can't seem to get it ? Cheers!

No you didn't do much - only completely saved the day! ? I will try and see if I can find some trackball users - in fact I should do a search for all types of input device - but it's a reasonably targeted industry audience and I don't think there's many that stray too far from a mouse Cheers!