Jump to content

Carl last won the day on December 31 2022

Carl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Carl

  1. So good to see and hear of all the progress! Please stop running through the videos and learning so quickly. I need time to make more
  2. A similar technique is used to "open and close" items in this Creative Coding Club demo https://codepen.io/snorkltv/pen/BaLWxLW Student Link to Lesson Video: https://www.creativecodingclub.com/courses/take/b-sides-bonuses-and-oddities/lessons/19117678-auto-close-open-item-reverse-current-timeline
  3. I think this should do the trick https://codepen.io/snorkltv/pen/XWEodKZ?editors=1010 for each blurb you can call querySelector() like so gsap.to(blurb.querySelector(".image-container img")...
  4. Carl

    Correct term

    sounds like you're looking for fastScrollEnd Check out the 3.8 release notes for demos and more
  5. ha. i tried something with adjusting the position parameter but things got all weird. in my haste i just put on a jet pack down the wrong rabbit hole. lol. tweening the zIndex is neat approach. definitely wouldn't have thought of that. thanks for the help and sanity. i knew i was missing something obvious.
  6. the example I'm using was built specifically for instances when the in and out animations would happen simultaneously and there was no concern for zIndex stacking. I modified it in a way I wouldn't necessarily recommend. To deal with the images moving out slightly after the new image come in I used a customEase to add the appearance of a delay. the CustomEase looks like this. You'll notice the curve is flat at the beginning showing no change in values. I'm not sure this is entirely necessary... but I couldn't figure out a way to adjust the staggers without things going terribly out of synch. To change the zIndex of each new image as it comes in I used a brute-force approach which injects 10,000 sets into the timeline at the proper interval. Again, not something I'd recommend every day. https://codepen.io/snorkltv/pen/dymZRWO?editors=0010 The stagger approach I'm using doesn't account for adding callbacks that have access to the index of each element. Starting fresh on this I would use 1 of three methods 1: easiest. Just duplicate the first image in the dom and place it after the last image. when the "fake" first image is animation is done animating in and the previous image is fully transitioned out, just jump back to the beginning of the timeline where the real first image is fully visible. You can place a label there to make it easier. 2: ditch the staggers and build the timeline using a loop. this might add some more flexibility for having tweens that have callbacks that change the zIndex sorting. 3: Ditch the timeline completely and use a function-based approach. At certain intervals functions will be called that handle the in and out animations completely independently. This allows transitions to start at different times and overlap however you like. These functions could also ensure the image coming in has the proper zIndex. If you are a creative coding club student I have a 3 part series called "Breaking free of the timeline mindset" that goes over this in depth. Again, the solution above isn't the best. hopefully some of this helps. I would very seriously consider going with option 1. there is nothing wrong with duplicating the image if you really want this effect.
  7. 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.
  8. 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
  9. 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.
  10. 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!
  11. 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.
  12. 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.
  13. 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.
  14. I haven’t used it in awhile but see if getRelativePosition() can help https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.getRelativePosition
  15. 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.
  16. 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
  17. It sounds like you're trying to do what @Mamboleoo tweeted about yesterday Give that a shot
  18. 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!
  19. 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.
  20. 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.
  21. those posts @mvaneijgen are super useful. I had this demo laying around so here it is https://codepen.io/snorkltv/pen/abqgBVP
  22. 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.
  23. 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!
  24. 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
  25. 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