sixtillnine

Thanks Zach, I'll set it in the JS. I didn't want to set it in the css as the element may contain information important to SEO.

Thanks Zach, could you point me in the direction of the documentation that would help me modify that behaviour to what I'm trying to achieve with the batch. Staggered. Triggered by the batch. Primed on page load. If not possible I'll add the zero opacity style via JS, but if it could all be handled by GSAP it would save me a step.

I've updated the code pen to show how the same animation is treated differently by GSAP when in a batch. The red box in in the batch, the green box is not. See how GSAP automatically assigns opacity 0 to the green box, yet not the red. https://codepen.io/sixtillnine/pen/zYKReLE

OK, however in other from animations I haven't had to set the initial opacity to zero. If you have a look at the green boxes in the original code pen, they are styled the same as the red (apart from the colour), but GSAP sets their initial opacity to zero? P.S. - I'd set the start halfway up so you could see the effect. I noticed the issue as the bottom of the viewport can shift in iOS as the address bar is animated to it's compact size.

I've been using from animations to fade in elements using opacity. Normally GSAP will modify the target element(s) with a 'starting' opacity of 0 - which is great. However the batch function I've been using does not do this, hence if the start point of the animation is anywhere in the viewport the element will appear at full opacity then jump to zero as the start marker is crossed. I'm trying to achieve a staggered effect for a group of tiles - if there is a better way of doing this - I'm all ears.

Thanks, that's done the trick.

I'm trying to animate an element when it enters into the page, and animate it as it's about to leave - I'd like each to scrub (so the element disappears and reappears accordingly). The entrance animation works on it's own, and the exit animation works on it's own - however when I apply the two the 'exit' animation doesn't work, it simply disappears. Any ideas?

Thanks Mikel, I was putting it in the wrong place. That works great.

I've got a staggered scroll trigger batch using the following code: ScrollTrigger.batch(".tile", { onEnter: (elements, triggers) => { gsap.from(elements, { opacity: 0, stagger: 0.15, }); } }); Is it possible to have the start point of the animation to be the bottom of the tile element?

Thanks again. I’ll see how on I get on with that method.

This works (locally but not on codepen - which is worrying), but isn't the most elegant solution - is there a better way of achieving this? It fires off a scrollTrigger without any animations to check end points, then there are two different scrollTriggers with animations whose end attribute is set depending on whether or not the original would have finished within the max scroll. function boxRollMax() { const boxes = gsap.utils.toArray('.box'); const maxScroll = ScrollTrigger.maxScroll(window); boxes.forEach((box, i) => { const scrubStart = 100; const scrubEnd = 50; const animCheck = gsap.from(box, { scrollTrigger: { trigger: box, start: 'top '+scrubStart+'%', end: 'top '+scrubEnd+'%', } }); const animEnd = animCheck.scrollTrigger.end; const maxScroller = maxScroll; const isEndAfterScrollEnd = animCheck.scrollTrigger.end > maxScroll; console.log('Box '+i+' end ('+animEnd+') position is after end of scroll ('+maxScroller+'):' +isEndAfterScrollEnd); if(isEndAfterScrollEnd){ gsap.from(box, { scrollTrigger: { trigger: box, toggleActions: "restart pause resume pause", start: 'top '+scrubStart+'%', end: 'top '+maxScroll, markers: true, scrub: 0.5, id: 'boxRoll', }, rotate: 360, x: '50vw', }); } else { gsap.from(box, { scrollTrigger: { trigger: box, toggleActions: "restart pause resume pause", start: 'top '+scrubStart+'%', end: 'top '+scrubEnd+'%', markers: true, scrub: 0.5, id: 'boxRoll', }, rotate: 360, x: '50vw', }); } }); }

Follow up question if that's OK... How can I affect the 'end' value so that the animation completes before Max scroll. I've tried: function boxRollMax() { const boxes = gsap.utils.toArray('.box'); const maxScroll = ScrollTrigger.maxScroll(window); boxes.forEach((box, i) => { const scrubStart = 100; const scrubEnd = 50; const anim = gsap.from(box, { scrollTrigger: { trigger: box, toggleActions: "restart pause resume pause", start: 'top '+scrubStart+'%', end: 'top '+scrubEnd+'%', markers: true, scrub: 0.5, id: 'boxRoll', }, rotate: 360, x: '50vw', }); const animEnd = anim.scrollTrigger.end; const maxScroller = maxScroll; const isEndAfterScrollEnd = anim.scrollTrigger.end > maxScroll; if(isEndAfterScrollEnd){ anim.scrollTrigger.end = 'top '+maxScroll; } console.log('Box '+i+' end ('+animEnd+') position is after end of scroll ('+maxScroller+'):' +isEndAfterScrollEnd); }); } This didn't work for me (obvs ). My goal is for anything scrubby to check if it's end is after the max scroll, and if so switch it out for the maxscroll value.

Awesome thanks.

Here's a tricky one. Say an element has been set to scrub and the finish point 50% of the viewport height (enabling it to complete it's animation). Is there a way to check if that element will ever reach 50% up the viewport?

Thanks for this. In the end I gave up on Barba. I just couldn't work out how to kill and refresh the scrollTriggers - I could get other js to fire on events but GSAP didn't work for me. I switched over to Swup (https://swup.js.org) - this does what I needed it to do, and I can get scroll trigger to survive the transitions in a predictable way. If you're interested here is the working JS (assuming gsap and swup are already loaded): /*SCROLL TRIGGER*/ gsap.registerPlugin(ScrollTrigger); function boxRoll(){ const boxes = gsap.utils.toArray('.box'); boxes.forEach(box => { gsap.from(box, { scrollTrigger: { trigger: box, toggleActions: "restart pause resume pause", start: "top "+scrubStart+"%", end: "top "+scrubEnd+"%", //markers: true, scrub: 0.5, id: 'boxRoll', }, rotate: 360, x: '50vw', }) }); } function tileFade(){ const tiles = gsap.utils.toArray('.tile'); tiles.forEach(tile => { gsap.from(tile, { scrollTrigger: { id: 'tileFade', trigger: tile, toggleActions: "restart pause resume pause", start: "top 100%", end: "top 75%", scrub: 0.5, //markers: true, //stagger: 1, }, opacity: 0, scale: "random(0.5, 0)", }) }); } /*Swup*/ const swup = new Swup({ //plugins: [new SwupHeadPlugin(), new SwupBodyClassPlugin()] }); swup.on('contentReplaced', function () { window.scrollTo(0, 0); /*GSAP */ boxRoll(); tileFade(); }); /*Seems to work better if these are called after swup*/ boxRoll(); tileFade();