Jump to content
GreenSock

Carl last won the day on December 31 2022

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,710
  • Joined

  • Last visited

  • Days Won

    541

Everything posted by Carl

  1. Wow. That's Great. The plugin makes it very easy to do what I need and also do things like animate from contain to a scaled up cover (which I found quite cool). However, as I tend to do, I found an interesting issue. Being that the background image in the demo had existing css to set background-size:cover I tried omitting the "size" property from the tween. I thought maybe it would just pick up the existing value. I tried this tween // now let's animate... let tween = gsap.to(".photo", { backgroundSize: { nativeWidth:1200, nativeHeight:1200, scale:2 }, duration: 2 }); I'm not embedding the pen as it seemed to cause codepen to lockup and I couldn't edit it or re-run. Eventually Chrome gave me an "aw snap, something went wrong". If specifying size in the tween is required that's totally fine, but maybe it's worth looking into preventing any big problems if it isn't. Otherwise, this is great. Thanks so much for creating it!
  2. I came across an interesting use-case for this function. I wanted to animate TO a background-size:cover FROM a scaled UP size. I needed the background image to maintain it's aspect ratio and stay centered at it's large size through the tween. Prior to reading @Chris Heuberger's post I came up with my own custom solution that required bgSize() to return the dimensions without the "px" so I could scale them up. As always I was looking for a quick, brute-force, solution and not necessarily the most elegant. I hacked bgSize() so I could get back a custom object with width and height {width:xxx, height:yyy}) if I passed in a parameter of returnType:"object" https://codepen.io/snorkltv/pen/dyZYdBv?editors=0110 In the example above note: the image is square at 1200x1200 native size you can click to replay the animation it isn't responsive but you can resize the browser and then reload to see it work at different aspect ratios circles always stay perfectly round I wasn't able to get the official OR Chris' modified function to perform like that but I may not have been using them right. I think there is some value in being able to scale the "cover" dimensions and preserve aspect ratio. My API suggestion would be that if you want to get "scaled cover" dimensions you could pass in size:"cover-3" and return the cover dimensions at a scale of 3. While I agree that in most cases it is probably better and easier just to scale an image as opposed to a background I had a very specific use where I was using the background image as part of a "clip-text" effect and thus needed the scaled-up cover dimensions. https://codepen.io/snorkltv/pen/ea5402e6ae9a5a70723c280f3b06539c If you look closely you will see that the background image inside the text is scaling down (as the text scales up) and it perfectly aligns with another background image that is set to "cover" and is sitting BEHIND the scaling text. Notes not responsive unless you reload after resize (didn't put that in) performance is atrocious on FireFox but silky smooth on Chrome I will probably try to just recreate this with SVG Any way I guess what I'm voting for here is a clean way to scale up (or down) the cover dimensions (like in my first demo) and possibly contain too. If that's already available OR if Chris' modifications can handle it just let me know. Like @Shaun Gorneau mentioned I think these scenarios may be more common than the tiling effect in the original demo. Regardless of my mis-use or misunderstanding of the function I'm glad it was available! Thanks!
  3. very glad to hear the demos helped no problem. the key is to first understand the next line faq.animation.reversed(!faq.animation.reversed()) which basically says "make the reversed state the opposite of what it currently is" which is kind of like saying "make the opened state the opposite of what it currently is". opened means the timeline has played closed means the timeline has reversed since the faqs all start "closed" we need the timelines to be reversed so that when we set the reversed state to be the opposite they will play forward and open. Hope that helps!
  4. I recently updated my second demo. my first attempt was rushed and I had some convoluted logic on the clicks. new version is much cleaner.
  5. Hi @Josh Mathis Thanks for the demo. You were really quite close. To get around ONLY the last item opening and closing it was just a matter of declaring the tl variable with let like so on line 13 let tl = gsap.timeline({ paused: true }); After that it seems to work fine. if you want to just toggle the open and closed state of each faq independently on click you can simplify your click code a lot like this https://codepen.io/snorkltv/pen/QWOLoyK?editors=0010 If you want to automatically close the open item every time you open a new item you can do something like this https://codepen.io/snorkltv/pen/eYeOXRV?editors=0010 Notice how I'm assigning an "animation" property to each faq. This makes it easy to target a particular faq and its animation.
  6. something i only stumbled into by chance one day was that you can make up a nonsense callback for an animation and it will get called on start. this is why it may have appeared that onReverse was doing something. Check console here https://codepen.io/snorkltv/pen/abVoamo?editors=1011 And as @elegantseagulls stated a reduced demo would help a lot. It was way to much code for me to try to understand. Just provide a minimal demo showing one issue on one thing. It will make it much easier for folks to help you. thanks!
  7. Hi there seems to be some misundertandings. There is no onReverse method or callback in all of GSAP (Tweens, Timelines, ScrollTrigger, etc). There is an onReverseComplete callback on Tweens and Timelines which fires when an animation is done reversing. onStart is a callback for tweens and timelines onEnterBack is a callback for ScrollTriggers and belongs in the ScrollTrigger config object How you are using it here is incorrect. Please see comments in code below let fourthTransition = gsap.timeline({ scrollTrigger: { trigger: "#main-container-5", id: "container5", start: "top top", end: "top top", markers: true, toggleActions: "play none reverse none", /* *** You could put an onEnterBack here *** */ onEnterBack:function(){} }, /* *** There is no such thing as onReverse() *** */ onReverse: () => { console.log("on reverse!") document.querySelector("#fixed-text").innerText = "13" }, onStart: () => { console.log("START!") }, /* *** onEnterBack() does not belong here *** */ onEnterBack: () => { console.log("on enter back") document.querySelector("#dinamic-text-5").innerText = "15" }, });
  8. Hi @gilesht If you want to scroll through an SVG and trigger animations along the way this demo from my course ScrollTrigger Express may help https://codepen.io/snorkltv/pen/bb90e695148fec0087f76c2f703cbdb4 I like to keep things simple to make them easier for my students to digest but it was inspired by this amazing example from Shunya Koide https://codepen.io/shunyadezain/pen/rNxzvgp?editors=0010 There's so much you can do with ScrollTrigger and SVG!
  9. Thanks @GreenSock for the explanation. Thanks @OSUblake for chiming in too with the clarification! after reading Jack's explanation I was having trouble figuring out why/if it was needed in your solution. As somewhat of an experienced user I like knowing about these "bonus" methods. On the other hand I can't say a bunch of obvious use cases are jumping out at me for when I would need it. So you can put me down for a vote for documenting it, but I won't be broken-hearted if it doesn't happen.
  10. Clever solution, @OSUblake What is rawTime()? I don't think I've come across that before.
  11. the team will have to comment on whether it's a bug or not, but in case it helps anyone, having scrub:true (not a number) seems to make it work properly. adding fastScrollEnd:true did not seem to have any impact. when scrub is a number it means the animation has to catch up to the scroll position with a slight ease. I guess in some ways it makes sense that since the animation is killed instantly when you leave (before it is finished catching up) you are seeing it in this "stuck" state.
  12. Hi @Fatih MIG glad you enjoyed the article. Whether you use timelines or not does not matter when it comes to overwriting. As long as 2 animations are trying to control the same object at the same time then the rules of overwriting will apply.
  13. there are few ways to do this. if you want to avoid tracking how many times the 2nd part has played without incrementing a variable or something you can lean on tweenTo() and tweenFromTo() I put 2 labels in your banner: after the first tween and after the end of the timeline Then I created a main timeline that tweens to the first label and repeats a tween between the first label and last let main = gsap.timeline() .add(tl.tweenTo("banner")) .add(tl.tweenFromTo("banner", "end", {repeat:1})) https://codepen.io/snorkltv/pen/dyVwMZz?editors=0010 This video from my courses should help explain a bit more
  14. I was slowly getting to the same conclusion as @OSUblake 😁 it's a pretty cool effect. nice job https://codepen.io/snorkltv/pen/XWeyGVZ?editors=1010
  15. this is a demo that accompanies one of the lessons from courses, perhaps it will help https://codepen.io/snorkltv/full/PomzGPN
  16. unfortunately the images don't really help. Just make a very simple demo, none of the real artwork, just some colored divs that represent your layout. If you can replicate the issue without React even better, but here is a starter CodeSandbox demo for you https://codesandbox.io/s/ut42t
  17. thanks for the minimal demo! So strange. I'm not one to be able to discuss the inner workings of GSAP like this, but in case it helps anyone it seems that other properties do not exhibit this behavior. for instance changing opacity to color:white .dim { /* opacity:0.5 */ color:white; } https://codepen.io/snorkltv/pen/vYeVOmz
  18. sorry I don't know what "navbar container" is but your code shows your trigger is the same thing that is being animated . perhaps if you post a demo we'll be able to provide more accurate help.
  19. it looks like the thing you are animating is also your trigger. if your trigger is moving around it is going to cause problems for ScrollTrigger's calculations. You should use something else as your trigger. perhaps create a parent element that wraps your trigger.
  20. @OSUblake the 142vmax for the dot width and height is very cool. clever trick! @Edward not exactly sure what the end result is going to be but I took a chisel to some of the css and changed the trigger to be the block. in one of your more recent demos the "start" marker was way above the "scroller-start" which meant your scrolltrigger animation was most of the way complete when the page first loaded before any scrolling occurred. Your GSAP code really wasn't bad. A big part of all of this is getting CSS to do what you want. This is what I came up with just trying to center the text over the circle. https://codepen.io/snorkltv/pen/RwLJMeL This reminded me of one of my lessons in ScrollTrigger Express. https://codepen.io/snorkltv/pen/NWNrbay?editors=0010 The focus of the lesson is on preventing the page from scrolling until the first part of the animation is done, but it uses a similar circle-fill trick that was inspired by another demo of Blake's. maybe something in the demo will be helpful. 80% of the hard part of ScrollTrigger animations is setting things up with CSS and HTML and getting the animation timeline right BEFORE you worry about ScrollTrigger. My beginner GSAP course is totally free (link in signature) if you are interested. Good luck with the project.
  21. thanks for the suggestion!
  22. Just in case you want to take this type of effect a little further, here's a demo from one of my courses. You can remove the scale and opacity entirely if you want and get loads of variation by tweaking the values in the distributor configs. SInce the horizontal motion is being achieved via an x transform you should get better overall performance than letter-spacing. https://codepen.io/snorkltv/pen/yLyqVWQ?editors=0010
  23. Hi raana, I don't think I understand. If you are asking if the plugin I linked to can be customized a certain way, you would have to ask the author. If you are working on your own solution, pretty much anything is possible with JavaScript, and changing direction of something shouldn't be much of a challenge, but again, not really sure what you are asking.
×