Jump to content
GreenSock

fernandocomet

Members

  • Posts

    38

  • Joined

  • Last visited

Recent Profile Visitors

2,946 profile views

fernandocomet's Achievements

  • Reacting Well Rare
  • First Post Rare
  • Collaborator Rare
  • Conversation Starter Rare
  • Dedicated Rare

Recent Badges

3

Reputation

  1. fernandocomet
    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. fernandocomet
    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. fernandocomet started following React GSAP Hover/Out multiple animations for svg paths , Optimizing ScrollTrigger , Navigation Bar ScrollTTrigger and 3 others
  4. fernandocomet
    How can I optimize this code? Is doing what I want but do I need three Scrolltriggers?
  5. fernandocomet
    Oh yes! That helps and has less Code than mine https://codepen.io/fernandocomet/pen/KKbZvao Thanks again
  6. fernandocomet
    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
  7. fernandocomet
    Thanks a lot! That works
  8. fernandocomet
    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
  9. fernandocomet
    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
  10. fernandocomet
    I wonder if this can be done better. Want to play the Confetti when user scrolls at "launcher" How to stop it?
  11. fernandocomet
    fernandocomet changed their profile photo
  12. fernandocomet
    Ok thanks, you mean like a Proxy?
  13. fernandocomet
    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
  14. fernandocomet
    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
  15. fernandocomet
    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?
  16. fernandocomet
    That is a great solution to edit the svg paths and apply GSAP to all classnames Thanks a lot
  17. fernandocomet
    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
×
Login Create Account