Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

2,946 profile views

fernandocomet's Achievements

  1. Thanks Rodrigo, Don't worry, I assure you I am more confused than you with the code The thing is that in the demo with only one ScrollTrigger https://codepen.io/GreenSock/pen/YzdYdzK onToggle is not working when you scroll down and then you scroll back to top as NavBar is not getting transparent This is what I want to achieve:
  2. Thanks! Good use of Attributes. I have realized of a minor issue from my previous demo https://codepen.io/fernandocomet/pen/gOZojBb: Once you have scrolled down, if you go back to top: - When the navbar gets to "colorchange", it should be black - When it gets out of "colorchange" it should be transparent Looks like events "onEnterBack" and "onLeave" are not working. Maybe I have an event issue Any hint?
  3. How can I optimize this code? Is doing what I want but do I need three Scrolltriggers?
  4. Oh yes! That helps and has less Code than mine https://codepen.io/fernandocomet/pen/KKbZvao Thanks again
  5. The idea is: - When the section is white have NavBar with tomato background color - When the section is black have NavBar with transparent background - When the section is over "darkhero" NavBar is blue I think my OnLeave event is not working. How can I improve this? Thanks in advance
  6. Thanks a lot! That works
  7. Thanks again! For example I want the confetti effect just when user is over that section. So if I have this structure: <div class="clicker" id="clicker"> Clicker </div> <div class="spacer"> Spacer </div> <div class="launcher" id="launcher"> Launcher </div> <div class="spacer">Spacer</div> I added another ScrollTrigger to stop it once you enter the spacers let tl = gsap.timeline({ scrollTrigger: { trigger: ".launcher", onEnter: myConfetti, onLeave: confetti.reset(), toggleActions: "restart pause resume pause" } }) let tl2 = gsap.timeline({ scrollTrigger: { trigger: ".spacer", onEnter: confetti.reset(), toggleActions: "restart pause resume pause" } }) I don´t think that is doing nothing, the Confetti lasts for 3 seconds anyway: function myConfetti() {var end = Date.now() + (3 * 1000); Updated Codepen https://codepen.io/fernandocomet/pen/abjEJvW
  8. Mmmm, not sure if it is working, I added onLeave: let tl = gsap.timeline({ scrollTrigger: { trigger: ".launcher", onEnter: myConfetti, onLeave: confetti.reset(), toggleActions: "restart pause resume pause" } }) https://codepen.io/fernandocomet/pen/abjEJvW
  9. I wonder if this can be done better. Want to play the Confetti when user scrolls at "launcher" How to stop it?
  10. This should be easier 🤦 Ok, as you said, if I go to greensock.com/install and I want to use GSAP SplitText, I have this message: And then they say: <!-- SplitText.min.js is a Club GreenSock perk which is not available on a CDN. Download it from your GreenSock account and include it locally like this: <script src="/[YOUR_DIRECTORY]/SplitText.min.js"></script> So, for this case I cannot use CDN The problem is this: We can not upload .js files to Webflow, that is the main problem I tried it converting the .js file to a .txt and uploading it as an asset, so I call it in the script. I had the error: Uncaught SyntaxError: Cannot use import statement outside a module (index):29 Uncaught ReferenceError: SplitText is not defined at (index):29:21 type="module" Also I tried to copy and paste the code from the .js but it is not working
  11. I am having lots of problems with this also. I believe the issue is related with Webflow and not with GSAP library as my Codepens are working ok I am working for a company with a GSAP Shockingly green plugin I have issues with TextPlugin library, I have in console error "Uncaught ReferenceError: SplitText is not defined" I believe the issue is related with the way I call the library. Actually I have the TextPlugin uploaded to a CDN but my issue persist Also I should say Webflow has some limitations: 10.000 characters code for each embed There are three places where you can add Custom Code: Project Settings - Custom Code Add code at the end of the <head> tag: Add code before </body> tag: Each Page Code Inside <head> tag Before </body> tag Custom Embed Code I tried with both: <script src="whateverCDNurl/src/TextPlugin.js"></script> <script type="module" src="whateverCDNurl/src/TextPlugin.js"></script> But my error persist
  12. I don´t understand this. I want to play the animation: - When page loads - When user goes back up (scrolling) But these parameters: start and end, what do they mean?
  13. That is a great solution to edit the svg paths and apply GSAP to all classnames Thanks a lot
  14. Hi, I am working in React + GSAP I try to animate different paths (ids) from an svg asset (see image attached) I am trying to animate the different paths on Hover/out I am Following this example https://codesandbox.io/s/react-hover-forward-ref-pthnx but only the last one is being animated. I think I have sintax problems. Should I use a timeline instead? My demo is here: https://codesandbox.io/s/little-circle-gsap-43pcbs?file=/src/App.js Any help is welcome