Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Everything posted by fernandocomet

  1. Thanks a lot @akapowl I am using Flex in all my demos 🤦🏻🤦‍♀️
  2. 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
  3. Cool! It works! I had seen Clamp use for fluid typography. https://codepen.io/fernandocomet/pen/rNppJmo Thanks
  4. 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
  5. Say I want to make a circle from right to left, as in the image, what is failing?
  6. 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
  7. 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?
  8. Hi friends I wonder how can I make this demo work also when user scrolls up. (This is like a stepper)
  9. Do you know where can I find a template for a standard Ad for Sizmek with GSAP just with code ? Thanks in advance
  10. 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!
  11. 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
  12. 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
  13. Ok, so if I use it for React I think I should do: import gsap from "gsap"; import 'gsap/TextPlugin';
  14. Ok than you very much, So this will only work at Codepen and Codesandbox I think
  15. 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?
  16. Hi, In the demo, I want to change the text for each time color changes. I used to do this with Set or with an onComplete I´m trying to do it with .add but target is wrong ("target message not found") function changeText(arr) { gsap.to("#message", { text: changeText(messages) }); } var tl = gsap.timeline({ repeat: -1 }); colors.forEach((color) => { tl.to("#message", { xPercent: -50, left: "50%", duration: 0, delay: 0 }) .to("#bg", { backgroundColor: color.dark, duration: 1, delay: 3 }) .to("#message", { color: color.light, duration: 1, delay: 0 }) .add(generateText); }); function generateText() { gsap.to("message", { text: changeText(messages) }); } let counter = 0; function changeText(arr) { console.log("dentro"); counter = counter + 1; return messages[counter].title; } Any help is welcome
  17. Thank you Zach I want to change color of background of text every constantly, asigning the colors of my Array (dark/light) I wonder if it can be made with gsap timeline or if there´s a better option
  18. I want to change color of my background and text again and again parsing my array of colors. I don´t know if I can do that using a variable or changing itemColor value, I was thinking in using an onComplete funcion by I will use this inside React, let itemColor = 0; var tl = gsap.timeline(); tl.to("#bg", { backgroundColor: colors[itemColor].dark, duration: 1, delay: 3 }).to("#h1go", { color: colors[itemColor].light, duration: 1, delay: 0 }); Also I have a Codesandbox link for React https://codesandbox.io/s/gsap-react-text-gsaptimeline-cuk58?file=/src/App.js Thanks in advance
  19. Thanks all of you, that´s the point! Thank you very much!
  20. Hi, I´m using Animate CC with TimeLineMax, sorry for being a beginner. Can anybody tell me why the red square in the files attached is not moving to exactly coordenate x = 0 ? I´m doing this: var root = this, tl; //gsap timeline tl = new TimelineMax(); tl.to(root.logo, 1, {x:"0", ease:Back.easeOut}); tl.to(root.cuad, 2, {x:"0"}); tl.to(root.cuad2, 2, {x:"200", ease:Back.easeOut}); Thanks a lot! 300x250.zip
  21. ok, I think it´s enought with this: <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.8.3/TweenMax.min.js"></script> XD
  22. Hi friends, In my document I am doing this: <script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="js/greensock/TweenLite.min.js"></script> I would like to know if is it possible to load GSAP library from an absolut url. somethin as: <script type="text/javascript" src="http://greenshock.com/js/greensock/plugins/CSSPlugin.min.js"></script> Thanks