Jump to content
GreenSock

fernandocomet

Members

  • Posts

    33

  • Joined

  • Last visited

 Content Type 

Everything posted by fernandocomet

  1. fernandocomet
    Thanks a lot! That works
  2. 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
  3. 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
  4. fernandocomet
    I wonder if this can be done better. Want to play the Confetti when user scrolls at "launcher" How to stop it?
  5. fernandocomet
    Ok thanks, you mean like a Proxy?
  6. 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
  7. 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
  8. 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?
  9. fernandocomet
    That is a great solution to edit the svg paths and apply GSAP to all classnames Thanks a lot
  10. 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
  11. fernandocomet
    Thanks a lot @akapowl I am using Flex in all my demos 🤦🏻🤦‍♀️
  12. fernandocomet
    I working on a React environment. My demo is here: https://codesandbox.io/s/trial-svg-rubn8y If I remove markers on ScrollTrigger my animation is not working. On line 400 if I comment this line: markers: true My demo does not work. Not sure it is related to ScrollTrigger or my styles Any help is welcome
  13. fernandocomet
    Cool! It works! I had seen Clamp use for fluid typography. https://codepen.io/fernandocomet/pen/rNppJmo Thanks
  14. fernandocomet
    I am trying to set some bounds on the rotation of this circle so that the marker can only get to 180 degrees. I believe this approach is wrong or not supported for ScrollTrigger, how should I do it? Thanks a lot
  15. fernandocomet
    Say I want to make a circle from right to left, as in the image, what is failing?
  16. fernandocomet
    I wonder how can I make that triangle grow to be a circle. So the movement would be as the image Maybe should I edit my svg? Or I could have a whole circle and mask it into a triangle Any help is welcome
  17. fernandocomet
    For example this approach works for scrolling down: https://codepen.io/fernandocomet/pen/NWwKaQN But what if I want to move elements to previous position when user scrolls up? Should I look for another approach?
  18. fernandocomet
    Hi friends I wonder how can I make this demo work also when user scrolls up. (This is like a stepper)
  19. fernandocomet
    Do you know where can I find a template for a standard Ad for Sizmek with GSAP just with code ? Thanks in advance
  20. fernandocomet
    Thank you very much Rodrigo for you help and assistance. I see it clear now. This colors and sentences props I will change them to dynamic data. Thank you again!
  21. fernandocomet
    Ok I´m trying to perform an example with what you say. I´ve defined out the timeline and have added ComponentWillMount, don´t have previous error but a new one: "Cannot remove node 35 because no matching node was found in the Store." https://codesandbox.io/s/gsap-react-state-problems-swnuv?file=/src/Text.js
  22. fernandocomet
    Hi there! I am making a portfolio site. I am building it in React and using GSAP. I have found the following problem: Say my site has four sections: Home / Text / Works / About And I will use GSAP on section 2 "Text", so if I navigate to this section it is ok, but if you go to another section and go back to "Text" I have this warning: Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. Also performance fails (as you see the text go changing but the order is broken) I don´t know if it is asking too much, but maybe you can give me some guidance of what is really happening I have seen documentation of GSAP and React and believe it is related to State management and components. Not sure if I have to use React Transition Group in my component "Text.js" or how can I overtake this warning Here you can see the error Any help is welcome
  23. fernandocomet
    Ok, so if I use it for React I think I should do: import gsap from "gsap"; import 'gsap/TextPlugin';
  24. fernandocomet
    Ok than you very much, So this will only work at Codepen and Codesandbox I think
  25. fernandocomet
    Thanks a lot Zach, I think I need a plugin, it says: "Invalid property" "text" "set to" "Froggyfer" "Missing plugin? gsap.registerPlugin()" I am using these two: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/TextPlugin.min.js -> Is this ok?
×
Login Create Account