AdventurousDeveloper

Makes complete sense! Thank you for taking the time to explain and your example! Cheers ?

Hi there! Not sure if possible, but here we go.... In my codePen, I have a timeline where one element uses a bounce ease and the others use power1 eases. On timeline play everything plays as expected. On reverse the bounce animation plays in reverse which is to be also to expected. In my use case, the play bounce ease is visually perfect, it's just the reverse ease that doesn't look right. My question - is there a way to exclude an element from the reverse timeline or is it possible change an elements ease to a different ease for reverse only? I hope my explanation makes sense ?

Hey GSAP fam! Sorry if this type of question has been asked before or an obvious thing... I've started to build a lot of my client websites using GSAP + ScrollTrigger. Generally a page template would have multiple individual content sections that make use of their own ScrollTriggers and animations etc.. Currently I set each section scrollTrigger to be triggered at the top of a section element and end at the bottom of the said element. This means some pages can end up having 5+ seperate scrollTriggers on them. Rather than my approach above, I am wondering if it is considered best practice to create a master timeline and then use add() to add all my scrollTriggers to it? I guess this would offer better control positioning etc..? Any advice would be greatly appreciated! Cheers,

Hey @amcaw, No worries at all! I couldn't help myself and dug out my old project files for a bit of a refresher. I've put together a CodePen to show how I got everything working. Hopefully this will get you going and also help other people with video scrubbing and ScrollTrigger. I've tested this across Safari, iOS Chrome, FireFox and Edge, but adjustments may still needed to be made. Just a couple of notes from what I found out on my way getting this to work: I struggled with large video sizes and page load, I had to find a happy medium of video quality and file size. H.264 is widely available, namely H.265 (better in that it compresses more for the same quality, or gives higher quality for the same size). To use it, replace the libx264 codec with libx265, and push the compression lever further by increasing the CRF value — add, say, 4 or 6, since a reasonable range for H.265 may be 24 to 30. Note that lower CRF values correspond to higher bitrates, and hence produce higher quality videos. I contemplated using images instead, see the GSAP AirPods https://codepen.io/AdventurousDeveloper/pen/XWZxLyO What made the magic happen was setting scrollTrigger onUpdate progress to half the FPS of the video to allow the entire video to be scrubbed for the duration of the scroll. Playing around with the end value will extend the length of how long/short you need the video to scrub for. No doubt there may be a more efficient of doing this, so maybe someone else could fine tune further. Hope this helps ?

Hey @amcaw, I had the same issue with a previous project using the codepen code example you provided. What solved the issue for me was the encoding of the video. In the codepen example you posted, the video used was encoded using ffmpeg - https://ffmpeg.org/. You need to run this via command line using the settings in the commented out section: // ffmpeg -i ~/Downloads/Toshiba\ video/original.mov -movflags faststart -vcodec libx264 -crf 23 -g 1 -pix_fmt yuv420p output.mp4 // ffmpeg -i ~/Downloads/Toshiba\ video/original.mov -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output_960.mp4 I had to fiddle around with the frame values (-crf 23 & -crf 20) to what best suited my video. Hope this gives you a bit of direction ? Cheers

Wow yes! Makes complete sense, thanks for taking a look! Just a quick question on the onRefresh that you added: // the following line is to work around a minor bug that'll be fixed in the release following 3.10.4 onRefresh: self => self.progress && self.progress < 1 && el.classList.add("active"), Is this only required until 3.10.4 is released? Thanks again for your time

Hi there, I'm trying trouble adding and removing an active class on nav elements for both onEnter and onEnterBack of "panels" in an animationContainer. What's happening so far: on scroll the active class is added to the first, second and third ul li a elements, but then doesn't action on the fourth ul li a element. The same for scrolling back through the "panels". Would somebody please give some insight on what I'm doing wrong here, I would really appreciate it! Cheers,

Apologies, I definitely didn't want to come across as I was wanted someone to show me how to build it , I really appreciate the time you have spent helping me so far! I hope my next issue is considered an GSAP-specific question ??. I have setup a new Codepen, this time with my content panels are animating correctly with the images and text hiding and showing as required. https://codepen.io/tracta_nz/pen/XWZVRQR What I'm struggling with is chaining of my animations per panel, more specifically the '.color-inner' elements seen in my pen. I have an animation set to trigger when an element in a panel hits the top. // transition color on enter gsap.to(document.querySelector('.image .color-inner'), { xPercent: 50, scrollTrigger: { trigger: document.querySelector('.scene-inner'), start: "top center", toggleActions:"restart none none reverse", invalidateOnRefresh: true, markers: true } }) This works great for the first item, but doesn't work for the other elements. If I add to the forEach loop, all the animations are triggered at the same time, even if I add the "elem" as the trigger. scenes.forEach(function(elem, i) { //.. adding animation here triggers all elem }) Is it best practise to use a master timeline and then add timelines for both the colour mask animation and the content/image fade in/out to it? Cheers,

Hey @GreenSock, Thanks again for your comments, really helped me identify where I was going wrong with a lot of things... This was bit of a brain fart moment, sorry ?‍♂️ What I was trying to achieve was have the end point be the total combined height of all the panels. I thought this would be necessary to make sure I scrolled the entirety of all my panels. This was also bit of a brain fart moment, sorry again ? The reason for animating to 50% on enter of panel is purely due to client brand collateral. Taking your advice, I started with the animation first without scrollTrigger. This definitely made it easier to plan everything out. On enter of the panel, the colour is animated from x: 100 --> x: 50. The idea is on exit of the panel, the colour would then animate to x: 0 covering the image while it is replaced with the image in the next panel. I've got my mask animation working with scrollTrigger, if you wouldn't mind taking a look at my new CodePen please? https://codepen.io/tracta_nz/pen/QWQOrxJ I think what I need to do next is have a scrollTrigger to handle the container scroll, which has an end point of the total height of all panels. Then add another scrollTrigger for each of the panels to animate both the text content fade out and also the colour mask animation? Similar set up to this pen posted in the forum Any tips or further advice would be really appreciated Cheers!

Hey @GreenSock, Thanks for taking the time to have a look at this and your comments/advice. I'll absorb what you have commented on and have another crack at it. Thanks again!

Hi everyone, Hoping someone here wouldn't mind helping me troubleshoot a scrollTrigger animation/sequence. Put simply, what i'm trying to achieve.... is to display a pinned series of images and text content that overlay one another on scroll. For each image I have a colour positioned at x: 100% that is masked using css mask-image. On enter of each panel the colour would position to x: 50% and then x: 0% on exit of the panel. At the point when the colour is at 0%, I need to hide the text and image from the current panel (leaving the colour in place) and replace with text and image in the next panel. I think my first issue is getting the correct scrollTrigger structure. I've put together where I am at on CodePen, though my timeline end doesn't seem work properly in CodePen as it does locally... end: "+=" + panelHeight * panels.length + "+=100%" Any pointers or direction would be very much appreceiated! Cheers

Hey @OSUblake, Thank you so much, that fixed the issue! I'll be sure to keep that in mind for the future. Thanks again!

Hi there, I have an issue with a timeline animation in Safari v15.4 & Safari iOS 15.4.1. Hoping someone might be able to see if it's me doing something wrong or maybe a bug... My animation is pretty simple, images either move in from the top, left, right and bottom. On the repeat of timeline in Safari, the first image from the first timeline cycle is visible when then the repeat timeline is run. Running the same animation in Chrome and FireFox, this issue doesn't show. Any help would be much appreciated Cheers,

Hey @OSUblake, thanks for taking the time to have a look at this. What you said above totally makes sense and what I couldn't figure out. Cheers!

Hey everyone! I'm hoping this is considered a GSAP question rather than a Barba.js one. I've looked through this forum posts related to scrollTrigger and barba, which from I understand that scrollTriggers need to be killed off during barba transition then reinitiated after page transition. My environment is in WordPress and I'm getting no errors transitioning between pages. I've tried to simplify down what I'm using, so I hope this would be enough to troubleshoot... The below works, killing off all ScrollTriggers and then running "scrollFunction()". const cleanGSAP = () => { ScrollTrigger.getAll().forEach( t => t.kill(false) ) ScrollTrigger.refresh() window.dispatchEvent(new Event("resize")) } function delay(ms) { return new Promise( resolve => setTimeout(resolve, ms) ) } barba.init({ sync: true, transitions: [ { async leave(data) { const leaveDone = this.async() await delay(1000) leaveDone() }, async afterLeave(data) { cleanGSAP() }, async beforeEnter(data) { }, async enter(data) { $(window).scrollTop(0) }, async afterEnter(data) { }, async after(data) { //scrollFunction() this works //ScrollTrigger().refresh() this doesn't work } } ] }) function scrollFunction() { //gsap stuff here } My issue is the "scrollFunction()" is declared in another file and can't be moved to the file with the barba.js hooks. Replacing "scrollFunction()" with ScrollTrigger().refresh() in the after hook doesn't work or is this not how it's meant to be used? If not is there a global function that can innit all scrollTriggers? I'd appreciate and tips or help on this ? Cheers