Jump to content

Carl last won the day on October 13

Carl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. I'm not really following everything that you are asking. I'm a bit confused by some of your code so I'm just starting off with a modification of my tutorial demo https://codepen.io/snorkltv/pen/vYRWmZY?editors=0010 What is going on here is that the first image is paused at a time of 1 second for 1 second using these 2 lines of code //duration is the amount of time for each images animation. //by using pause(duration) we pause exactly at the time the first image is done fading in. animation.pause(duration) //wait 1 second and then tell the animation to play gsap.delayedCall(1, ()=>animation.play()) the animation is as follows: "existing image moves up and fades out while next image moves up and fades in" I'm not sure how this animation differs from what you described. feel free to play with the code or clarify what you would like to be different.
  2. Those examples largely use an external css file. This is great for maintaining consistency across the examples as well as making "global" updates to all the demos. However, it's not so good for people who want to look at the css. If you go into the css section of the pen settings you will see where the css is coming from that external css file is pulled from here https://codepen.io/GreenSock/pen/ZEGdQLM/7ba936b34824fefdccfe2c6d9f0b740b
  3. I occasionally reach for grid when I need multiple things (usually text) centered on top of each other. A byproduct of the approach below is that the child containers are all the same size. this approach was borrowed from stephen shaw (shshaw) and encompasses everything I know about grid. https://codepen.io/snorkltv/pen/JjYJpgw Your suggestion seems similarly useful, however it would really help to see a very simple demo. Setting up a functioning css layout is probably the hardest part of using GSAP, so I imagine this could help quite a few people. Sharing helpful tips is encouraged here and a nice way to engage with the community.
  4. lol. guess I over minimalized. I will start my 15 minute "time-out" over in the moderator jail. happy to see this all sorted out. very cool to see the more complex version working too!
  5. thx for the demo. i saw you have a lot of inline styles that set various transforms using transform:matrix() and transformOrigin. I'd recommend using gsap for the transforms in these cases I stripped out the inline styles in the svg and used gsap with a simple tween so you can better see where the origin is https://codepen.io/snorkltv/pen/BardxxK?editors=0010 Feel free to tweak the numbers of course.
  6. I appreciate the effort to minimize the demos. You clearly put in a lot of work and time and followed what GreenSock suggested. However, for first-time viewers it's still a bit much to decipher what we see in the code and what is present in the svg for example selectors like "#shape", "people > *", "toHere" have no descriptive relationship to what we see in the svg with a few different colored circles and a square. In other words I can't look those selectors without digging through the svg to find them and then I have to figure out their hex fill colors or positions to further know what is what. Things get further complicated with multiple animations: animating around a path, scaling the center, then triggering an onComplete As I said earlier, I'm a bit rusty on getRelativePosition() but with all the work you put in I decided it was worth my time to see if I could help and get you closer to a solution. Although your project requires those multiple animations and I understand you left them in there to illustrate the complexity you needed to address, it seems to me that the heart of the problem is getting 3 circles to go to the center of another circle. If we can figure that out, then we can add the other stuff. I simplified the demo as much as I could and tried to make things match your approach as best as I could with a few subtle name changes. Here's my attempt to get 3 red circles to go to the center of the green circle https://codepen.io/snorkltv/pen/QWmMqXz?editors=1011 It doesn't work, but perhaps this will allow @GreenSock or anyone else to more easily see what is wrong. What it does show is that all the circles can move to a relative "0,0" position but for some reason it doesn't like working with the "#greenCenter" group. lastly, please don't take my comments on your demos as a strong criticism, I'm just trying to point out how to make improvements in the future. I really appreciate the effort you put in.
  7. Sorry to hear it didn’t work out for you. im not around to dig into this further for a few days. perhaps @GreenSock can help fill in the blanks. it might help to have a demo with just one or 2 simple shapes.
  8. I haven’t used it in awhile but see if getRelativePosition() can help https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.getRelativePosition
  9. glad it worked. yup, if you want to request a new feature the forums are great for this. I'd suggest a new thread that concisely explains the problem with the existing API and how your suggestion would make things better for users. New ideas are always welcomed but the team always has to consider things like: impact on file size, number of users it will benefit, whether or not the same results can be achieved with the existing api, whether or not legacy code will be affected, etc.
  10. Cool demo. I can't really dive into the three js or anything, but keep in mind that onEnter and onEnterBack are callbacks for ScrollTriggers not timelines. I didn't see them anywhere in your code so I don't know what you have tried. Please consult this demo here that shows how to use these event callbacks to change the text. They only fire once each time they are needed so hopefully this helps https://codepen.io/GreenSock/pen/qBrRaeX?editors=1010
  11. It sounds like you're trying to do what @Mamboleoo tweeted about yesterday Give that a shot
  12. Yup, everything @akapowl said is correct. this video should help explain the key components of GSAP 3 I also have a completely free beginner's course here: https://www.creativecodingclub.com/courses/FreeGSAP3Express It will give you a gentle introduction to the parts of GSAP you need to know to get up and running quickly. Enjoy!
  13. Yes, your research is correct. tspans don't accept css transform values. However they do have x, y, dx, dy, and rotate attributes that can be animated, but they bring along their own baggage. By baggage, I mean they are a nightmare to work with. Consider the following example https://codepen.io/snorkltv/pen/WNzNLwz?editors=1010 Note how: moving the "e" moves all the letters that follow. the "o" rotates around the lower left corner. if you remove y="100" on the "e" <tspan> then the animation starts at y:0 which is above the viewport. if you uncomment the seemingly simple stagger on the last line then the animation gets totally mangled I'm currently working on a lesson video explaining all that (and more), but for the best results you need to: Break your text apart into individual <path> outlines (my preference) OR create individual <text> elements for each character and manually position them where they should be. This is acceptable for a few words but if you have many lines of text you may want to just animate each line instead of each character.
  14. thanks for the nice recommendations! here's the demo from that video in case anyone just wants to grab some code: https://codepen.io/snorkltv/pen/ExVEOPa?editors=0110 I can't help with the vue stuff.
  15. those posts @mvaneijgen are super useful. I had this demo laying around so here it is https://codepen.io/snorkltv/pen/abqgBVP
  16. yeah, that's a good work around as setting the to() value explicitly prevents it from getting wonked by the invalidation. I guess we just have to see if this merits an official warning or documentation about using from() and invalidateOnRefresh together.
  17. Hi and welcome to the GreenSock forums, Thanks so much for providing the very clear demos, it's so helpful. It appears removing invalidateOnRefresh or setting it to false will make things work as you expect https://codepen.io/snorkltv/pen/RwQqpPo?editors=1010 With from() tweens they render immediately, meaning that when your page first loads the opacity gets set to 0 and the tween is created that will animate opacity from 0 to 1. However, it appears those tweens are also being instantly invalidated leaving the opacity at 0. then the tweens are created again using opacity 0 as the start state. Now your tweens are trying to animate from opacity 0 to opacity 0 which means the opacity will always be 0. This is just my guess at what is happening. @GreenSock can offer more insight as to whether its a bug or expected behavior. EDIT: it looks like you just found the invalidateOnRefresh cause. nice work!
  18. Thanks for putting in the time to experiment and provide that demo. Great job! A set() is a tween object with no duration so there is a little bit of overhead involved. A new object is created with its own methods and properties. In your situation you are going to be using many set() calls 60 times per second. There could be some performance implications with lots of objects animating at once. I don't have time to implement this for you now, but take a look at quickSetter() Also, @GreenSock may be able to weigh in with some better advice
  19. If I understand correctly, you should be able to do all that you describe. GSAP is built to animate any numeric property of any object JavaScript can touch. Those properties can also be "function-based" It's probably one of the most under-utilized features of the platform. I updated two demos from the archives Custom Object with getX and setX methods https://codepen.io/snorkltv/pen/mdXmLXg?editors=1010 For this to work the functions must have matching names like setMyProp / getMyProp or setOpacity / getOpacity. Custom Object with getter/setter function https://codepen.io/snorkltv/pen/JjpNvLv Both use an onUpdate on the tween for the purpose of just proving the values are being changed. Your objects can have their own code to handle whatever rendering or refreshing of the canvas that needs to take place when values change. Original thread for reference below. There is an additional demo in there from @GreenSock
  20. You also might be interested in registerEffect() Once you put a little time into making an effect, they require very little code to customize https://codepen.io/snorkltv/pen/LYNBZww
  21. 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
  22. 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.
  23. That's a great demo, @Cassie thanks for posting it here!
  24. 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.
  25. 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}, "<")