Jump to content
GreenSock

AdventurousDeveloper

ShockinglyGreen
  • Posts

    31
  • Joined

  • Last visited

Everything posted by AdventurousDeveloper

  1. Makes complete sense! Thank you for taking the time to explain and your example! Cheers 👍
  2. 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 😬
  3. 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,
  4. 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 👍
  5. 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
  6. 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
  7. 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,
  8. 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,
  9. 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!
  10. 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!
  11. 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
  12. Hey @OSUblake, Thank you so much, that fixed the issue! I'll be sure to keep that in mind for the future. Thanks again!
  13. 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,
  14. 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!
  15. 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
  16. Hey Jack @GreenSock, Thanks heaps for taking the time to reply! I do have control over how GSAP and ScrollTrigger are loaded using wp_enqueue_scripts. What I was hoping to achieve with this was more or less a fallback if GSAP and ScrollTrigger weren't avaliable. But i'm not sure if this is actually just overkill.. Reason for wanting something like this is because the blocks created will be reused throughout other website builds, so it's more of an internal check tool. Your solution of using typeof() is great thank you. GSAP returned as an object as you mentioned in your example. Though the ScrollTrigger check couldn't be checked as an object, but as a function. It works, but is this the right way of checking for plugins? if ( typeof (gsap) === 'object' ) { console.log('GSAP installed') if ( typeof (ScrollTrigger) === 'function' ) { console.log('ScrollTrigger installed') } else { console.log('ScrollTrigger required') } } else { console.log('GSAP required') } Thanks again!
  17. Hey everyone, Sorry if this has been asked before... My use case is using GSAP and GSAP plugins within WordPress ACF Blocks. I'm not using React or anything fancy like that.. I am wondering if there is a best practise way or solution to check if GSAP is available and if required, specific GSAP plugins have been registered e.g ScrollTrigger before running javascript functions? My thoughts were to run maybe a global check and place all my functions inside of it. Whether that's the most efficient way of doing it I'm not sure... Appreciate any input or advice 😅 Cheers,
  18. Of course, thank you! 🤦‍♂️ I feel very silly now haha. Thanks for pointing that out and the suggestion on the making the code shorter. Cheers,
  19. Hi there, Hoping someone may have an answer or can give some insight. Within a ScrollTrigger.matchMedia I have two of the same timelines, difference being they have specific start and end points. Each also have the same onEnter which runs a function. The issue I'm having is the onEnter function is run twice, which I guess makes sense as theres two timelines.. Is there a particular way onEnter functions need to be added within matchMedia? Here's an example of my code, I can try get a codepen up if needed. ScrollTrigger.matchMedia({ "(min-width: 1441px)": function() { let item = document.getElementById('item'); gsap.to(item, { ease: "none", scrollTrigger: { trigger: item, start: "+=40% +=40%", end: "+=40% +=40%", scrub: true, markers: false, once: true, onEnter: function onEnter() { innitFunction(); }, } }); }, "(min-width: 1440px)": function() { let item = document.getElementById('item'); gsap.to(item, { ease: "none", scrollTrigger: { trigger: item, start: "+=30% +=50%", end: "+=30% +=50%", scrub: true, markers: false, once: true, onEnter: function onEnter() { innitFunction(); }, } }); } }); innitFunction(); Really appreciate any help/info on this Cheers,
  20. Hi there, I'm trying to work out how to set the start point for this animation e.g #1 is positioned at 12 o'clock. As mentioned other posts in the forum, svg circles starting point starts at 3 o'clock and the work around is to set rotation in this case to -90. But as the items are already rotating I'm not sure on which element the -90 needs to be set to. Any help would be greatly appreciated! Cheers,
  21. Wow I was completely going down the wrong track hahaha. Looks like I need to keep refreshing myself on the documentation and keep practising 👍 Hey really appreciate you spending time looking at this, what a champ! Cheers,
  22. Hey Blake, Whoooooa! Thank you so much, I was banging my head against a wall trying figure this out lol. Yeah the active class was my attempt at toggling an active class on the active item e.g clicking #5 will set the active class to the 5th item - or if using the next button, the active class is removed from #1 item and added to the #2 item etc etc.. I've managed to get active class toggling working now, on click the class .active is added and styles applied. https://codepen.io/tracta_nz/pen/dyVMbdj My next challenge is getting the active class synced with the next and previous button clicks. I've tried a few things, but maybe I'm just not familiar enough with gsap.utils.toArray or arrays in general. My thinking is that I need to find the index of current item in gsap.utils.toArray and get the indexs of the next and previous items? I had some success when it was going through the array, but once I hit the end it broke and also broke if I was on first item and went backwards. Or maybe I'm approaching this from the wrong direction? If you could give any insights I would really appreciate it and thanks again for taking the time to help me out! Cheers,
  23. Hi @OSUblake, Thanks again for your help I'm now looking to implement an active class to the items. Meaning whichever item has the active class the timeline rotates/snaps to that item e.g. clicking item #5 would rotate the item #5 around to active arrow marker. I also plan on using the active class to style the items and control text content to show/hide. I've got the on item click active class working and also the removing of the active class on click of prev/next buttons. But I'm unsure how to re-add the active class to the item in the timeline animation. https://codepen.io/tracta_nz/pen/dyVMbdj If you have any insight on the best approach to tackle this I would be very grateful! Cheers,
  24. Hey Blake, Thank you for taking the time to help with this, I really appreciate it! Your solution was bang on! Cheers
×