Jump to content

PointC last won the day on May 10

PointC had the most liked content!

PointC

Moderators
  • Content Count

    3,063
  • Joined

  • Last visited

  • Days Won

    276

PointC last won the day on May 10

PointC had the most liked content!

Community Reputation

7,882 Superhero

About PointC

  • Rank
    Moderator

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Seattle area
  • Interests
    web design, motion graphics, 3D animation, video production, all things sci-fi, Mt. Rainier hiking and my dachshunds

Recent Profile Visitors

27,051 profile views
  1. I'm not quite sure what should be happening here, but the cloud isn't moving because you have a lowercase 'c' on your tween target. // switch this cloudOne.to( "#cloud-1", 9, {transform:"translateX(94vw)"} ) cloudOne.to( "#cloud-1", 9, {transform:"translateX(0vw)"} ) // to this cloudOne.to( "#Cloud-1", 9, {transform:"translateX(94vw)"} ) cloudOne.to( "#Cloud-1", 9, {transform:"translateX(0vw)"} ) Does that help? Happy tweening.
  2. Gotta be honest — I thought that sentence was gonna end with "we don't allow CSS animations around here." 🤣 Since Zach has a shiny new GreeenSock Admin badge, it's probably time to dust off the chalkboard.
  3. I'd just like to point out — having all this in one SVG would make everything easier to control and scale. You can also use the MorphSVGPlugin.pathDataToBezier() method to make your orbit. Using a circle allows you to quickly change the radius to your liking. If you have symmetrical objects in the orbit, you can even change the scale to reverse the orbit direction. https://codepen.io/PointC/pen/wbyYwQ Just my two cents. Happy tweening.
  4. Hi @Technics1210 I'd recommend just using an inline SVG, but we've had some discussions about injecting the SVG too. Here's a good one: Happy tweening.
  5. PointC

    GSAP Reverse

    Since you're dealing with two timelines here, you need to make some changes. When you play the forward timeline and then play the reverse timeline it works because that's their first play. When you click again to play nothing happens because they've already played. You can fix that by using play(0) or restart()which will play from the beginning of the timeline. Another problem two timelines creates is by playing the reverse timeline, you're not changing the reversed status of the forward timeline. My advice would be to use fromTo() tweens on both timelines and just use a forward/reverse toggle variable. This is where having one timeline to simply play/reverse makes things a bit easier. Having separate timelines targeting the same element can also cause a fight for control of the element if you click too quickly. I think this thread can help. Happy tweening.
  6. Not quite sure what you're doing, but you can also animate the viewBox. Here are a couple of old pens that show the technique. https://codepen.io/PointC/pen/OMabPa https://codepen.io/PointC/pen/XbqBmM
  7. Yep, GitHub — https://github.com/janpaepke/ScrollMagic/issues Looks like they now offer premium support too. https://support.scrollmagic.io/ We're happy to help with GSAP related questions and problems. Happy tweening.
  8. From the docs: Why is my Global Timeline 1000 seconds long? That means you've probably got an infinitely repeating animation somewhere. GSDevTools caps its duration at 1000 seconds. Scrubbing to Infinity is awkward. https://greensock.com/docs/Utilities/GSDevTools Happy tweening.
  9. More info about GreenSock licensing: https://greensock.com/licensing https://greensock.com/why-license
  10. I'm not familiar with that plugin. Have you tried it in your project? Have you asked in the ScrollMagic forum? (SM is not a GreenSock product) https://github.com/janpaepke/ScrollMagic/issues If you have any GSAP related questions or problems, we're happy to help.
  11. I think I misunderstood the question. I thought morph c was on the same timeline as morph a--> b so it would be automatically yoyoing between the first two labels and then tween to the end on scroll. My mistake. Looks like the above solutions will take care of the problem. Nice work @mikel and @Dipscom. 👍
  12. Unless you've used the little known zombie timeline in which case you need another method to kill it.🤣 var tl = new ZombieTimelineMax(); tl.removeTheHead();
  13. You'd probably want to use some ScrollMagic events to take control of the timeline. http://scrollmagic.io/docs/ScrollMagic.Scene.html#event:enter Rather than having ScrollMagic control the timeline on load, you'd have the tween/timeline playing automatically. Then you hit the trigger and tween the progress() to any position you like. Here's a demo from another thread, but shows the basic technique. The timeline is not part of the ScrollMagic scene, but when scrolling to the triggers you can pause/play it. https://codepen.io/PointC/pen/oovrxq Hopefully that helps. Happy tweening.
  14. I'm not sure I follow your question, but I think it's safe to say there would be a solution to have the two libraries work well together for your needs. Maybe you could make a demo? Thanks.
  15. Looks like that site is using Three.js https://threejs.org/ You'll definitely need to use canvas/WebGL on something like that for the best performance. GSAP is an animation engine. It doesn't do any of the rendering. It doesn't care what you're animating — DOM, SVG, canvas. If it has a numeric value and JavaScript can touch it, GSAP can animate it for you. Happy tweening.