Jump to content

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

PointC last won the day on August 16

PointC had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by PointC

  1. If you check the console you'll see that headingRedf is not the <h1>, but rather an object. This will make it move. tl[0].to(headingRedf.current, 1, { y: +30, }).to(headingRedf.current, 1, { y: 0, }); You're also getting a console error about exports not being defined. That's all I can offer with my lack of React knowledge. Happy tweening.
  2. I don't know anything about React, but what you have wired up there is returning an array for the tl variable. A timeline is the first element in the array and then a function. This seems to fix it. tl[0].to(headingRedf, 1, { y: +30, }).to(headingRedf, 1, { y: 0, }); Again, I have no knowledge of React so others will probably jump in with a proper solution.
  3. Load GSAP into that pen and add this line: TweenMax.to("text", 0.5, {y:10, yoyo:true, repeat:-1}); That will move the mask text up and down. Happy tweening.
  4. If you can post a demo with what you've done so far, I'll take a peek.
  5. Yes, you can animate a SVG mask. You can also switch the text in the mask to a path if you like. My advice would be to start trying things and see what works and what doesn't. The best way to learn is to start messing with code and see what breaks. Happy tweening.
  6. Happy to help. Sounds like you've got it now. 👍 You can also use each: instead of amount if you need exact staggering durations for each element. Stay tuned for the next release of GSAP 3.0 when advanced staggering adds some fun new features. Happy tweening.
  7. Hi @Fakebook When you use the special advanced stagger property in the vars it will overrule the normal stagger parameter. Here's a fork of your pen in which you can see I just made the stagger parameter 100, but everything works as expected. You can put null in that spot too so your position parameter is correct. https://codepen.io/PointC/pen/xxKggye Does that help? Happy tweening.
  8. Ha! So true. I've made that mistake several times trying to help people here on the forum with their demos. That lowercase 'l' and '1' really start to look alike after you stare at them long enough. 👓
  9. I see you're using ScrollMagic. I think you'd benefit by reading my recent article: Demos #4, #7, and #8 show how to create multiple scenes in a loop with jQuery. You can certainly use a vanilla JS loop too. I think your answers will be in that article, but if you have any problems please feel free to post again to this thread. Happy tweening.
  10. Hi @rmccre Welcome to the forum and thanks for joining Club GreenSock. I'm wondering about the order in which you're loading files. Are you loading TweenMax --> MorphSVG --> yourcustomJS ? Are you also loading at the bottom of the page or checking to see if the DOM is ready? I'm not sure if this is the issue, but it's the first thing that came to my mind to check. Happy tweening and welcome aboard.
  11. I'm not quite following the question. Do you mean how to move the actual HTML/CSS/JS code from CodePen to your website? If that's what you're asking, I think just a copy/paste would be fast and easy. You can also export the demo by clicking the export button on the bottom right. As for naming, you'll definitely need to be mindful of duplicates with your ten demos so the animations all work correctly. Is that what you meant? Happy tweening.
  12. There seems to be some general weirdness with the overflow-x on iOS. When I test your demo in my iPad, it's just letting the width of the page go out to the full width of the wrapper with all the boxes. I'm no iOS expert, but a Google search showed a few results for overflow-x not being respected. So for your Draggable question — you want the user to be able to press the draggable element and scroll up/down, but once you start dragging left/right you want that up/down scroll to stop? Is there a reason the user needs to be able to scroll the page up and down by pressing the draggable element? I ask because allowNativeTouchScrolling: false would work great for this.
  13. Hi @Kári Bertilsson Welcome to the forum and thanks for joining Club GreenSock. Have you tried: allowNativeTouchScrolling: false Does that help? Happy tweening and welcome aboard.
  14. I honed my speed skills back in the day before I was a Mod. I would try to answer faster than Carl, Jonathan, Blake, Diaco and Jack, but would usually lose those speed battles.
  15. How about this? https://codepen.io/PointC/pen/aboNbEm Happy tweening.
  16. Loops are your friends when you need to make several ScrollMagic scenes. I recently wrote a post about GSAP and ScrollMagic. Check out demo #4 and #7 as they show how to create multiple scenes with a jQuery loop. You can of course use a vanilla JS loop too. Hopefully that helps. Happy tweening.
  17. Another option is not using ScrollMagic on small screens. Here's a thread from yesterday that shows how you can either enable/disable scenes or create/destroy the controller at certain widths. Maybe that'll give you some ideas too. Happy tweening.
  18. We need to hold back certain things so all the mods look like we know what we're doing.
  19. The GreenSock Animation Platform:
  20. You're missing the GSAP plugin from ScrollMagic <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script> Happy tweening.
  21. I think moving the scripts to the bottom of the page will solve this for you.
  22. In addition to the great advice from Shaun and Zach, I thought I'd point you to this similar thread. It has a little bit of extra info which might help too. Happy tweening.
  23. The path isn't morphing as you'd like because your paths have some funky points. The thin has more than the thick and some of the point positions on the thin look very odd to me. Ideally on a shape like that you'd have 8 points. Here's a side by side comparison of your thin and thick. As with all things SVG, it comes down to asset prep making your life a lot easier. Just FYI — you don't need three shapes for this. Your original and thin versions are the same. You can just morph back to the original whenever you like. Hopefully that helps. Happy tweening.
  24. @Arintoos I received your private message, but we need to keep support out here in the public forum. I think you're just missing the ThrowProps plugin on your site. https://greensock.com/docs/Plugins/ThrowPropsPlugin That is a Club plugin. https://greensock.com/club/ Happy tweening.