Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation since 03/21/2024 in all areas

  1. I've just build something similar, check it out! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/WNWxPGV?editors=0010
    4 points
  2. You don't need GSAP to add a class to an element, just use .classList.add(yourClass); The problem with that is that it either has the class or it does not, there is no in-between state, so nothing will animate, see below. You're on the GSAP forum, so I think you look to animate things, then just create an animation for each property you want to change, much more fun and easier to control! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/dyLzJxg?editors=0011
    3 points
  3. GSAP is smart and on page load calculates everything it needs to do the animation, so that when it is time it to animate it doesn't need to do calculations anymore. In your case you have two ScrollTrigger animating the same element, so both of them see the initial state of your gradient and record that and when it is time they animate from that initial state to their new state. You want the second ScrollTrigger to wait until the first one has finished. You could do this multiple ways, but the easiest is to give the second tween immediateRender: false, so that it waits until it needs to do the animation. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/RwOgqJj?editors=0010
    3 points
  4. That's because the browser's getComputedStyle() doesn't return the calc() data properly. So when GSAP gets the starting (from) value, the browser gives it a value with no calc(), and then the end string has calc() in it with multiple numbers. It's the same issue with your other demos (mis-matched data/quantities). There are two solutions: 1) Use CSS variables: https://codepen.io/GreenSock/pen/RwOgRJQ 2) Use a normal .fromTo() tween so that GSAP understands what you're trying to do and can use the raw starting value instead of a computed one from the browser: https://codepen.io/GreenSock/pen/wvZeWXQ?editors=0110
    3 points
  5. Alright, I couldn't help myself - I just had to find an algorithm to try to smooth out the movement when the path goes backwards. After about 10 hours, I think I've figured it out, and also demonstrated how you can make the bee kinda twist itself to remain oriented in the direction it's moving using scaleX and scaleY: https://codepen.io/GreenSock/pen/mdgmawg?editors=0010 Notice that pathEase() helper function has been updated and you can pass in a config object with smooth: true. I hope that helps!
    3 points
  6. transform is a lot of properties in one, so in your example what happens when you also want to animate scale? or translateX? You would have to merge them all in to one string and animating strings is not always the best idea. GSAP has exposed all the transforms and GSAP also does a lot of optimisations under the hood, so it is best to use the exposed properties for each transforms check the list here https://gsap.com/docs/v3/GSAP/CorePlugins/CSS?_highlight=transform#transforms Hope it helps and happy tweening!
    3 points
  7. That's typically beyond the scope of help we can provide here, but as a courtesy I tweaked the helper function to accommodate new enterAnimation and leaveAnimation functions that you can use to return an animation which gets plugged into the timeline: https://codepen.io/GreenSock/pen/qBwmOex?editors=0010 Does that help?
    3 points
  8. here is a quick one you can add any effect you want or play with the other options, just 5-10 min to take a look at the seamlessloop documentation and you're ready https://codepen.io/ahmed-attia/pen/RwOpyVX?editors=0011 you can check Carl's courses here and GSAP3 Express is free by the way https://www.creativecodingclub.com/bundles/creative-coding-club https://www.creativecodingclub.com/courses/FreeGSAP3Express
    3 points
  9. We don't typically provide custom solutions like this in these free forums, but I was curious about this and decided to clean up your demo for you: https://codepen.io/GreenSock/pen/GRLWvGp?editors=0010 I assume that was what you're looking for, right? You just had various logic issues and overcomplicated things a bit in my opinion. 🙂 I hope that helps!
    3 points
  10. hello, i need support from a gsap expert for two website elements (slider & scrolltriggered sections). the implementation and construction of the html framework should be done in webflow. who has the time and inclination?
    2 points
  11. I built a helper function specifically for this: https://codepen.io/GreenSock/pen/vYMJdjB?editors=0010 Related forums post: I hope that helps!
    2 points
  12. Hi, On top of @mvaneijgen's great solution you could also use the onToggle callback from ScrollTrigger: onToggle Function - A callback for when the ScrollTrigger toggles from inactive to active or the other way around. This is typically when the scroll position moves past the "start" or "end" in either direction, but if it shoots past BOTH on the same tick, like if the user scrolls extremely fast, onToggle won't fire because the state hasn't changed. You can often use this one callback in the place of onEnter, onLeave, onEnterBack, and onLeaveBack by just checking the isActive property for toggling things. Here is a simple fork of your demo: https://codepen.io/GreenSock/pen/XWQaZdV Hopefully this helps. Happy Tweening!
    2 points
  13. Here's a simple code example of invalidateOnRefresh gsap.to(".el", { xPercent: () => window.innerWidth / 2, // here's a functional value that will update if the window size changes, (it will 'invalidate' on 'refresh') rotation: window.innerWidth / 2, // this value won't update scrollTrigger: { invalidateOnRefresh: true ... } })
    2 points
  14. Hi, Sorry about the difficulties but without a minimal demo there is not much we can do to help. On top of that we don't have the time resources to provide free general consulting or create something from scratch for our users. What you're trying to achieve is not the simplest thing to do, here are a few demos: https://codepen.io/osublake/pen/LYYJNmQ https://codepen.io/GreenSock/pen/MWPOQmo https://codepen.io/GreenSock/pen/MWqWvom Hopefully this helps. Happy Tweening!
    2 points
  15. Thx for the answer. Setting ScrollTrigger.normalizeScroll(true)Solved the problem.
    2 points
  16. Hi @nav and welcome to the GSAP Forums! Yeah it seems that some images were lost at some point with the domain change (from greensock.com to gsap.com). Basically a placeholder with a silhouette was in front of each image. For now I forked that demo with a placeholder instead for each card so you can see the effect https://codepen.io/GreenSock/pen/PoqRZOB Happy Tweening!
    2 points
  17. 2 points
  18. Hi @edwardsjethro welcome to the forum! Yes! No it does not. Below from the price page https://gsap.com/pricing/ No you are not, if you want to still sell your theme you'll need to have a business licence. If you stop selling it your current clients will still be able to use the theme they've bought with all the features of the tools. More info over at https://gsap.com/licensing/ Hope it helps and happy tweening!
    2 points
  19. Your pen doesn't load GSAP nor ScrollTrigger, would be great if you could at least provide a pen that is working at that level. For the centring of things, just remove ScrollTrigger and GSAP and focus on your CSS, lay everything out as you want it. Only after that is done add GSAP back in. for you pin question, pin: true pins everything located inside your trigger element. Your trigger element doesn't contain your circle, so it doesn't get pinned. Instead of using your trigger element as the pin you could also change the pin: true to an element eg pin: ".wrap-all" which would pin everything because this does contain your circle. Hope it helps and happy tweening!
    2 points
  20. @Cassie This looks like it made everything work... Now the triggers after the horizontal scroll trigger at the height it should. Thank you! ScrollTrigger.create({ refreshPriority: -1, // lower priority makes it happen later in the refresh() calculations ... });
    2 points
  21. Thanks so much Cassie! I made a small change to the script so that it can intercept the data-attribute and an array to insert multiple words at once. https://codepen.io/qurtopianodesign/pen/VwNpNyN?editors=0011
    2 points
  22. Hi there! Almost there, you just need to check within the loop if the word has the data attribute that you're after, if so you can add a different tween to the timeline. https://codepen.io/GreenSock/pen/XWQMQdz?editors=0011 Hope this helps!
    2 points
  23. Honestly my first step here would be to use transforms instead of backgroundPosition, that'll be easier on the browser to render. Give this one a go? https://codepen.io/GreenSock/pen/JjVWmJj?editors=1010 debug link for mobile If that doesn't work, then maybe try smooth scrolling and transforms, (with the caveat that it's not a magic bullet and may not be appropriate for your project, it's a very aesthetic choice and I wouldn't add smooth scrolling on a website without consideration of the tradeoffs. E.g - You'll need to adjust your markup to allow for fixed elements to be outside of the smooth scrolling area https://codepen.io/GreenSock/pen/jORBeKe?editors=1010 debug link for mobile If those options don't work it's time to face the reality that sometimes animations can be a little much for mobile browsers, safari makes our lives difficult sometimes. I often remove certain animations or create more simplified fallbacks for mobile. You can do that nice and easily with gsap.matchMedia() https://gsap.com/docs/v3/GSAP/gsap.matchMedia()/ Hope this helps!
    2 points
  24. Thank you very much Rodrigo! It works great now, and I learned a couple of things new. 🙏🏼
    2 points
  25. No, is totally fine to keep everything in a single timeline if you're carefully. In this particular case is better to move some animations out of the timeline. Is not a rule carved in stone is a case-by-case thing. Every project has it's own peculiarities and you should plan and develop them as you go based on the requirements of the project. In this case you can keep your timeline with the scrub in it just, instead of adding the menu part at the end, remove it and make that a different timeline, then you can use the onLeave and onEnterBack callbacks to play/reverse that timeline and then you can also reverse that timeline when clicking the buttons as well in order to hide that menu: // Timeline just for the menu elements const menuTimeline = gsap.timeline({ paused: true, }); // Add animations to the menu and buttons timeline const tl2 = gsap.timeline({ scrollTrigger: { // other configs scrub: 1, // use callbacks to play/reverse the menu timeline onLeave: () => menuTimeline.play(), onEnterBack: () => menuTimeline.reverse(), markers: true // shows the markers } }); // Then in your menu buttons btn.addEventListener("click", () => { menuTimeline.reverse(); // Then create other animations as well }); From the ScrollTrigger docs: onLeave Function - A callback for when the scroll position moves forward past the "end" (typically when the trigger is scrolled out of view). onEnterBack Function - A callback for when the scroll position moves backward past the "end" (typically when the trigger is scrolled back into view). Right now I'm on my way out so I can't take a good look to your demo, but hopefully this helps. Happy Tweening!
    2 points
  26. Hi @Iischeese welcome to the forum and thanks for being a club member! We love to see what you can come up with in a minimal demo so that we can beter understand your thought process and thus better help you understand the tool. Above are some links to Stackblitz templates so that you can directly work in your frame work of choice. (here is the Next.js version) I've written a guide how you can create these kind of card stacking effects, see the blog post here. And a demo below that uses that logic with a similar effect that you want. If you still need help please show us what you've tried in something like Stackblitz and someone here will be happy to point you in the right direction. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/abMbwYd
    2 points
  27. For the text I would use SplitText https://gsap.com/docs/v3/Plugins/SplitText/ and then stagger each the letters Keep in mind all ScrollTrigger is doing is animating your animation on scroll, so just build the animation and don't worry about ScrollTrigger at all. I've written a guide how to create card stacking effects and the logic can be applied here 1 on 1, you just have more elements that stack, so before doing anything you first want to lay everything out with CSS. See the post below and a demo from the post that animates a clipPath, which is also part of the animation I would suggest just start building in Codepen and first do all the CSS, then try to animate some things and only when you're done start thinking about ScrollTrigger. Pro tip in between fork your work, so you have versions on which you can fall back. When you get stuck post back here with a demo and one particular question and some one here will be sure to point you in the right direction. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/GReQYBr
    1 point
  28. Even though there was no demo, only lines of code, you still helped, and it worked very well in my case. I am very grateful for this. Have a good day my brothers!!!
    1 point
  29. Yeah is right there at the top of your log, splitScreenSlideshow is actually a collection of DOM nodes and not a single DOM node. Most likely you're using document.querySelectorAll()when you should be using document.querySelector() instead. Hopefully this helps. Happy Tweening!
    1 point
  30. Hi @codechirag. It's super tough to troubleshoot a live site. There are way too many factors and we can't really tweak things to see what's going on. If you'd like some help, please provide a minimal demo, like a Stackblitz or CodePen. Here's a starter template you can fork: https://stackblitz.com/edit/react-cxv92j Also keep in mind that Split-Type is not a GSAP product, so we can't really support that. Our tool is SplitText. 🙂
    1 point
  31. Amazing, thanks - good to know I solved the issue slightly differently where I only pinned the left side of the split content. However, I prefer this solution as it's less fussy! Thanks again
    1 point
  32. Yes just create an animation that animates the thing on the x-axis and then hook it to ScrollTrigger, then just add ScrollSmoother to the page and you're done. Here is an example. But I would just build it from scratch and just tackle one part at a time, first your layout with CSS then the animation, add ScrollTrigger to the animation and then at last add ScrollSmoother (keep in mind this plugin is only accessible for our members, but you can freely use them on things like Codepen to test them out!). If you still need help please provide a minimal demo with what you've tried and someone here will be happy to point you in the right direction. https://codepen.io/GreenSock/pen/dydpJzY?editors=0010
    1 point
  33. Sorry, I forgot to add the gsap and scrollTrigger into the pen. But you got the issue and solved my problem. I din't understand the concept of pin before. Thanks for clarifying it. I moved the section that needs to change on scroll into the container that has circles and made the circle container a pin. Now it's all working. Thank you so much for the help. I might have spent a good amount of my day figuring this out.
    1 point
  34. window.addEventListener("load", ...) should not be needed as by default the script tag is a module and is called once the dom is ready anyway https://docs.astro.build/en/guides/client-side-scripts/#script-processing you may need to use it if you use the script inline (is:inline)
    1 point
  35. Almost another 6 years, we're due for a comment
    1 point
  36. This is quite an amusing one. 😂 So innerHTML isn't technically an animatable value, it's either a string or nothing. Animatable values are things that can gradually change from one value to another, like numbers or percentages. e.g. You can rotate from. 10 to 360 easily as all the values in between 10 and 360 are valid You can't animate between backgroundImage: "none" and backgroundImage: url("myImage.gif"); because there aren't any intermediary states, you either have an image or you don't. However - GSAP does some clever stuff where it recognises complex strings and tries to animate between them for some CSS properties. I guess here you're passing GSAP a string and asking it to animate it. Obviously 1 is animating to 2 because that maps, but also the word "transparent" is something that you can animate with GSAP too, as that's used in CSS to represent a colour, and ultimately an rgba value.. 😂 This made me laugh but TLDR - it's not the right way to approach this. I assume you just want to set new text on scroll? You could do that with a set tween? If you want to actually tween the text you can use GSAP's text plugin for a more typewriter-esque effect. // instantly set the new text gsap.set("h1", { innerHTML: "Prepare for accelerated ramp-up, with transparent roadmap for staffing, knowledge transfer, team integration and performance KPIs.", }); // using text plugin? // replaces yourElement's text with "This is the new text" over the course of 2 seconds gsap.to(yourElement, { duration: 2, text: "This is the new text", ease: "none", }); Alternatively if you want to fade out one block of text for another, you'll need to layer the elements on top of each other and use opacity to fade them. Hope this helps!
    1 point
  37. Cassie your'e the goat if i could send you flowers i would haha.. thank you.. the landing page didn't open up like i thought it would but i'll keep practicing and thank you rodrigo, you guys are awesome
    1 point
  38. Yes, that's perfect, thanks! I figured that would add pin spacing under the element and make the section longer than I wanted, but I guess not. Thanks again!
    1 point
  39. Hi, One solution is to wrap the lotties section and the next one in a common parent and pin that one: https://codepen.io/GreenSock/pen/ExJmWdp The other solution is to create two ScrollTrigger instances to pin both sections at the same time for each lottie section and use pinSpacing false for the looties wrapper: https://codepen.io/GreenSock/pen/ZEZeLmL Hopefully this helps. Happy Tweening!
    1 point
  40. I was debugging, you can just ignore that. I thought maybe the draggable was initiated before the animations were complete.
    1 point
  41. I didn't have a lot of time to look at this, but it appears to me as though you were creating the ScrollTriggers in the wrong order. You should always create them in the order they appear on the page, -OR- you can set a refreshPriority on them instead so that you can make sure things get refreshed in the proper order. I added a ScrollTrigger.sort() at the end in order to force them to get ordered by their start position: https://codepen.io/GreenSock/pen/XWQRmmb?editors=0010 Also, this is not a good idea: transform: "translateY(100%)" It's much cleaner, faster, and more efficient to do this: yPercent: 100 Does that clear things up?
    1 point
  42. Hi, Try removing the lock file from your repo and pushing that again and see if the installation works. If that doesn't work you'll have to add your privjs token to the .npmrc file in order to install it for the first time, then you can remove the token from the .npmrc file and it should work for future deploys. Hopefully this is a private repo so your token doesn't get exposed. Hopefully this helps. Happy Tweening!
    1 point
  43. Hi @katling and welcome to the GSAP Forums! Sorry to hear about the frustrations, can relate that is no fun at all I believe the issues here are mostly logic-related ones. You have a timeline that is controlled by ScrollTrigger and that is scrubbed, that being said the playhead of the timeline is controlled by the progress of the ScrollTrigger instance based on the start and end points you pass to ScrollTrigger's configuration. Then in your buttons you have this: function selectEgg() { tl2 .fromTo("#menu-card", { x: "25vw" }, { x: "150vw" }) .fromTo(".menu-button", { opacity: 1 }, { opacity: 0 }) .fromTo("#menu-msg", { opacity: 1 }, { opacity: 0 }) .to("#menu-card", { display: "none" }) .to("#choose-menu", { display: "none" }) .fromTo( "#egg-dish", { display: "none", x: "100vw" }, { display: "block", x: "25vw" } ) .to("#egg-info", { display: "flex", opacity: 1 }); } function selectFish() { tl2 .fromTo("#menu-card", { x: "25vw" }, { x: "150vw" }) .fromTo(".menu-button", { opacity: 1 }, { opacity: 0 }) .fromTo("#menu-msg", { opacity: 1 }, { opacity: 0 }) .to("#menu-card", { display: "none" }) .to("#choose-menu", { display: "none" }) .fromTo( "#fish-dish", { x: "100vw", delay: 5 }, { display: "block", x: "25vw" } ) .to("#fish-info", { display: "flex", opacity: 1 }); } You are adding instances to the SAME timeline that is being controlled by ScrollTrigger, even further you're adding them once you have scrolled past the end trigger of the ScrollTrigger config (because your buttons are visible after that particular point). This spells trouble to me because you're extending a timeline whose playhead is already at the end or being tweened there (because you have a numeric value in your scrub config and a large one as well - more on that later). That of course is going to generate a jump and some erratic behaviour and you have to add to it the fact that you are using fromTo instances, which will change the current value of the property you're animating immediately to the value in the from configuration object and then tween it to the value in the to configuration object. You are animating the same elements that are being animated by the timeline controlled by ScrollTrigger with a scrub value in it. If for any reason the user scrolls while those animations are running, things can get really messed up because you'll have two instances battling for control over the same elements. Definitely don't do that. You have a very large value for scrub (10) that means that it takes 10 seconds for the timeline to catch up with the scroll position and the progress of the ScrollTrigger instance. Any particular reason for a value that big? The first thing you should do is avoid 1 and 2. Create completely different animations and don't animate the same elements that are being animated with the timeline that is controlled with ScrollTrigger. If you keep having issues, please change your demo so instead of images that are not loaded, use just colored divs to show what you're trying to do. Hopefully this helps. Happy Tweening!
    1 point
  44. Something like this: const tween = gsap.to(boxes, {yPercent:-50, repeat:-1, ease:"none"}); tween.timeScale(0); const eased = gsap.to(tween, {timeScale:1.5, duration:4, ease:"power4.in"}); Happy Tweening!
    1 point
  45. This is totally not to be mean, but check the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/ I know it sounds really boring, but just read the page once and you’ll be surprised how much knowledge is in there that you didn’t even know you needed. If you after reading it still need help just post back here with what you’ve tried and we’ll be happy to help you out
    1 point
  46. Hi, These demos should provide a good starting point: https://codepen.io/GreenSock/pen/NWWgXMO https://codepen.io/GreenSock/pen/mdqLWVV Happy Tweening!
    1 point
  47. I seem to have identified the cause of my problem. At least ScrollToPlugin is now working. As it turns out, it had nothing to do with GSAP, but I'll leave my solution in this forum for anyone else facing the same problem. The cause was the lack of output.format:'iife' in my rollup config. Here is my final rollup.config.mjs code. import { dirname, resolve } from 'path'; import { nodeResolve } from '@rollup/plugin-node-resolve'; export default { input: [ resolve(dirname(new URL(import.meta.url).pathname), './src/index.js'), ], output: { entryFileNames: '[name].js', dir: 'public', format: 'iife', }, plugins: [ nodeResolve({ extensions: ['.js'], }), ], }; Finally, thanks again to @GreenSock for the advice!
    1 point
  48. I think you might be over-engineering there. Normally we don't craft custom solutions like this in these free forums, but I was curious so I whipped together a different approach you could take: https://codepen.io/GreenSock/pen/jOvgrMG?editors=1010 Hopefully it at least gets you going in the right direction.
    1 point
  49. @grommas ah yes, some browsers still handle those scroll event paints on a different thread. Okay, so I'm experimenting with making it possible to normalize the scrolling of a particular <div> like this: ScrollTrigger.normalizeScroll({ target: ".vertical-1" }); Seems to work relatively well from my early tests - would you mind hammering on it? Here's the beta file of ScrollTrigger with this capability: https://assets.codepen.io/16327/ScrollTrigger.min.js
    1 point
  50. Hi pal! You can simplify your approach down quite a lot though by using staggers and just targeting the class rather than looping around. If you're looking for smoothness maybe try a different ease, or a different duration? 'sine' is often nice and smooth. https://codepen.io/GreenSock/pen/poeGmqw?editors=0010
    1 point
×
×
  • Create New...