Jump to content
GreenSock

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

Carl last won the day on March 17

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,583
  • Joined

  • Last visited

  • Days Won

    538

Carl last won the day on March 17

Carl had the most liked content!

About Carl

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. To "load the plugin" into Animate you would just provide the url of the MotionPath plugin js file in the exact same way you are loading the gsap javascript file
  2. Sorry I can't be of much help here. I haven't tried MotionPath with Animate (or really touched anything with JS and Animate in quite awhile). Back in the day I would probably just use a movie clip that had a hand-drawn motion guide in it and then control the movie clip with gsap. I'm assuming that as long as you have access to the svg path data you want to use you should be able to feed an Animate symbol as the target of a MotioPath tween.
  3. That's a great demo, @Cassie thanks for posting it here!
  4. to scroll to a label position without animation try the labelToScroll() method with duration:0 or use a set() https://greensock.com/docs/v3/Plugins/ScrollTrigger/labelToScroll() i'm guessing the animations you bypass will just be set to their end state when you get where you're going, but again, a minimal demo would go a long way. we don't need to see anything complex.
  5. Cool fly! in situations like this another option is to create the infinite animation and then control it inside another timeline. In the demo below I tween the time() value of wings timeline from the main timeline. https://codepen.io/snorkltv/pen/XWZbeYO?editors=1010 We can have fun with the speed of wings flapping by changing the duration on the time() tweens. Notice the last tween tweens to a time:4 in 1 second (very fast going up) .fromTo(wings, {time:0}, {time:4, duration:1}, "<")
  6. Hi, Nice job on the site. It isn't feasible for us to troubleshoot a live site of that complexity, however I noticed you are using an older version of gsap (3.5.1') I'd suggest updating gsap and all the plugins to the latest version 3.10.4 as there have been quite a few improvements lately.
  7. yup, and we were trying to help. sorry if any of it came off the wrong way. glad you got a solution working.
  8. Hi @Rhinoo Yup, I understand the perspective you have here "B shouldn't need to know about how long A is active for". As you said you could just just use a loop and get the delay from the previous index. There just isn't something in the api that specifically says "wait this long after this animation finishes before doing something else". But there are many ways to accommodate that as noted above. I think you are going to soon find that as you develop slideshows and quizzes like this where you need custom delays, custom transitions, and even allow non-linear navigation (user can jump from any slide to any slide)... timelines are going to break down fast. You may be much better off with a function-based approach where you have discrete functions for animating things in managing delays (showing progress bars, timers, etc) removing current slide I often take an approach where I'll have a function like aniamteIn(index) { // trigger the animation that animates the "index" slide in // when that animations finished fire an onComplete that triggers the delay via the wait() function } wait(interval) { // wait for interval to expire // show progress bar or timer // when done fire functions to animate the current slide index out //animateOut(index) // animateIn(index++) } This is a very rough outline but this setup allows you to animate FROM any slide to any slide with any animation you want and any custom delays. It even can be fully automated as each animation and function just triggers the next in the array of things. You could build it all out off of a single array as you mentioned. This functional approach can become a bit cumbersome to track through as you add features. more advanced programmers might prefer an object-oriented approach where you have Slide Objects and a TransitionManager that does all the heavy lifting. The point here is just that timelines are EXCELLENT for building sequences that need to play straight through on their own or perhaps need scrubbing or reversing. As you add more complexity you will find you will have much more flexibility generating specific animations on demand (via function calls) and handling delays / timers / progress separately.
  9. In the GSAP API and the English language, a delay offsets the start time of something. Using the delay or position parameter are literally the most logical and clean approaches for what you describe. The alternate approach @mvaneijgen supplied (adding an empty function later in time) is valid for adding "dead space" to a timeline. In addition you could also add a tween on an empty object that tweens nothing for 3 seconds gsap.timeline() .to('h1', {x: 100}) .to({}, {duration:3}) // 3 seconds of dead space .to('h1', {x: 0}); It could be argued though that this is the least logical approach If you literally want to pause the timeline for x amount of seconds and then have it resume, perhaps this video and demo will help Notice that the playhead literally stops during the pause https://codepen.io/snorkltv/pen/poJjZxR hope this helps!
  10. Yes, most browsers by default don't have smooth scrolling available. It sounds like you are looking for GreenSock's new ScrollSmoother Be sure to watch the video in the docs I added it to the demo you posted https://codepen.io/snorkltv/pen/MWrdgmJ?editors=1010 Better? ScrollSmoother is a bonus plugin for Club GreenSock members
  11. pretty sure you are only supposed to have one ScrollSmoother instance for the entire page found this in the FAQ in the docs Can ScrollSmoother be applied to the contents of individual elements instead of the whole web page? No, ScrollSmoother is intended to be used to smooth the scrolling on the overall page, not individual elements.
  12. Carl

    Filling circle jumps

    I'm not quite sure how you are going to fill from the outside in. if you have a solid background color maybe use 2 circles. Maybe look to svg. If you want guarantee the circle fills ANY viewport size, I learned this 142 vmax trick from @OSUblake https://codepen.io/snorkltv/pen/JjOJJWN Full lesson video explaining how it works https://www.creativecodingclub.com/pages/free-lesson-vmax If you want to fill window exactly you can determine the distance from center to a corner of the viewport to get the radius another demo from my courses (you may need to re-run to see the circle animation) https://codepen.io/snorkltv/pen/NWNrbay?editors=0110
  13. Hi Thanks for the demo. It's always good to start with small examples like this. Good job! I think you are just looking for scrub:true https://codepen.io/snorkltv/pen/dyJjEwK?editors=0010 Hopefully this helps
  14. give all the tweens a position parameter of 0. if you need more help please provide a minimal demo so we have some idea of what your code looks like and what you are trying to do. thx.
  15. i would most likely do something very similar to what @mvaneijgen provided above. However, it's also worth looking at this demo from @OSUblake which relies on the Flip Plugin and requires very little code. https://codepen.io/GreenSock/pen/pormXeP Also, I imagine you were just experimenting, but be careful trying to implement code like this let tween = gsap.timeline(pTarget) tween.play(pTarget) it isn't part of the API to pass elements into those methods
×