swansondesigns
swansondesigns's Achievements
-
Rare
-
Rare
-
Rare
-
Rare
-
Rare
Recent Badges
12
Reputation
-
I just came back to say that @mvaneijgen was correct in identifying the issue. I wasn't able to resolve it but that had more to do with not really having the access I need on the platform where I'm working than anything with GSAP. If the client had more time/budget I probably could have made it work but sometimes you have to do the best you can with what you've got. I love adding animation to my projects but sometimes other aspects of the site don't play ball.
-
@mvaneijgen Thank you so much! I'm looking into this possibility (and I think you are correct). I think there is an element within the <body> that is scrolling, but when I set that element to be the scroller I get an error. A closer look seems to indicate that the scrolling element is added with JS and my script is firing too soon (before the scrolling element is added to the DOM). I don't have source access, so I'm working with some support folks to see if I can set a dependency so that the scripts fire in the right order (failing that, I may hack it with setTimout). I just wanted to reply and say thank you right away. It may take a bit before I can actually sort it out.
-
Hello, I know that linking to a page is a no-no, and that I should make a minimal demo, but my issue is specifically with the site where I'm trying to get this to work and not with ScrollTrigger itself (which may put this outside of the scope of this forum). The basic issue is that my triggers THEMSELVES are scrolling out of view. Like they scroll as if they are page content (I've never seem them move before). It seems like the ScrollTrigger still fires at the right place, but since the start/end points are moving, the pinned element pins itself to the new location of the trigger point (which is now outside of the viewport). I tried to document this in a couple screen captures. I can provide a link to the actual page if that would help but since we aren't really supposed to do that I'm going to try this without it. I guess my main question is this: Is this issue related to how I have configured my ScrollTrigger or is there something about the website that is messing with the way ScrollTrigger works in general? For what it's worth, it works flawlessly on my local copy. Thank you in advance for any help you can offer. Graham P.S. I don't know why my uploaded screenshots are "tiling" as if they are background images. They are just normal screenshots.
-
Hello, I know I'm supposed to create a minimal demo but I'm really close to launching this project and I'm under a bit of a time crunch. I think this will either come down to "Oh you just need to do this" or I'll need to find a temporary workaround and come back when I have more time (totally fine if that is what I have to do). As a substitute for a minimal, I made a video to show the issue. https://www.loom.com/share/9211e908929942678a2a141a57a848ee If this can be diagnosed with just the video, that is awesome. If it can't, I promise I will come back after this thing is live and make a minimal demo. Thank you for your time. Graham
-
@GreenSock You are completely amazing. Sorry for the delay in responding to this. The project got paused for a bit so I'm just coming back to this now. With your example I was able to get the effect to work in the live project. Unreal that you support your customers this way. I'm so, so thankful. And thank you too @Rodrigo. Everyone earned their capes on this one!
-
I should have done this in the first place, here is my attempt at using the technique where you wrap all of the sections in a container and then pin that. https://codepen.io/swansondesigns/pen/poOZgmy I don't seem to be doing this one correctly at all because it doesn't work even without ScrollSmoother. I have tried adding this to the onLeave function: window.scrollTo(document.querySelector('.scene').offsetTop, 0); That didn't do the trick. Not sure what else to try. Thoughts? Thanks, Graham
-
OK, I took this solution back to my project and it didn't work. I played around with it and it seems to be caused by ScrollSmoother (which is part of my real project but I omitted from the minimal demo). I have a new codepen to show it here: https://codepen.io/swansondesigns/pen/XWPEwvv So is this the scenario where I would use the alternate solution above where the entire stack of sections is wrapped in a container and then THAT container is pinned instead of the single section? I would prefer not to do that if I can, but this project is really enhanced with the addition of ScrollSmoother so I'm reluctant to cut it out.
-
Arrrg! I was so CLOSE! Thank you so much @Rodrigo. I really appreciate it.
-
Hello, I'm trying to piece together a solution based on some forum threads I've found but I can't get the effect to work. The basic idea is this. The page is a stack of sections When you get to the "scene" section, the section is pinned and the animation within that scene scrubs until it completes The completion of that animation releases the pinned element When scrolling back UP, the animation stays in its final position (at the end) and the pinned section is now part of the normal document flow with no pinning. Is this possible? You can see here that I tried using onComplete to kill the ScrollTrigger (st) after the animation is complete, but it leaves the pinned section in the wrong spot. const anim = gsap.from('section.scene p', { scale: 0, // Using onComplete leaves the pinned element overlapping the adjacent section. // onComplete: ()=> st.disable() }); I also tried setting the ScrollTrigger only run once but that wasn't right either const st = ScrollTrigger.create({ trigger: 'section.scene', start: 'top top+=20', end: 'bottom top', scrub: true, pin: true, animation: anim, // Using "once" leaves space above the pinned element after scrolling past // once: true, }); The last thing I was going to try was just setting up another scrollTrigger to listen for the pinned element to be completely out of view and then reset the transform on the pinned section. For some reason that seems like a hack (and not even sure it would work). Is there something I'm missing? I'm happy to create my own solution if someone can point me in the right direction. Thanks, Graham
-
OK, of course, as soon as I submit the new topic I find information on it. I Googled before creating the topic I swear!! Anyway, this forum topic has a really nice solution for animating easily along a circle. And, in case anyone else finds this because they had the same issue, it was because I was adding the ease to the timeline declaration directly instead of inside "defaults". I thought I had added an ease to the individual tweens but I guess I didn't. This is what it looks like when working properly. https://codepen.io/swansondesigns/pen/wvxOKeq I am still open to any tips if there are improvements I could make here. I'm going to see what I can learn from the topic above but man that math looks scary!
-
Hello, I'm working on an animation with some images of planets and I thought it would be a good idea to get an SVG of a circle to use as a motion path so that I could place the SVG on the page using CSS and then animate my elements along the path. That part works, but the animation runs smoothly through and then stops before starting the next loop. I could do an "onComplete" function to reset it but that doesn't seem like the "right" way to do it. Is it? Am I missing something simple? Also, if this is just not a good way to approach this kind of thing I'm open to learning a better way. Thanks, Graham
-
Momentum/Inertia Question (GSAP + Locomotive?)
swansondesigns replied to swansondesigns's topic in GSAP
Hi @Cassie. Thanks for the confirmation. That is great news. I was hoping I didn't have to use both. When I said I was trying to tie animations to scroll speed it looks like the term I was looking for was "velocity". I found the Greensock Codepen that shows how to do it so I'll leave this here for anyone else who was looking for the same thing and comes across this post. https://codepen.io/GreenSock/pen/eYpGLYL -
Hello, I was looking for some info on how to tie some scrolling behavior to scroll speed and I came across this post. In it, @ZachSaucier says The original poster does not reply so there is no additional discussion of this. One of the websites listed is the portfolio site of Abishek Jha who has one of his sites listed on the Github page for Locomotive. But, Wappalyzer says both websites use GSAP. I started to use Locomotive at one point but the features of ScrollSmoother seem to make it unnecessary. Has the addition of ScollSmoother removed the need to pair GSAP & Locomotive? I also found another post from less than a year ago asking about this pairing and @OSUblake didn't tell the poster to just use ScrollSmoother so I'm trying to see what the most recent thinking on this is. I tried to find an answer on my own but I don't know when ScrollSmoother came out! Thanks, Graham
-
Thank you so much @mvaneijgen and @GreenSock! @mvaneijgen That was SO helpful! I was definitely over thinking this. The loop you showed is much easier to understand and I don't need to register an effect to accomplish what I'm trying to do (but nice to know it exists if I do need that later). I took what you gave me and tried to apply it to my practice project but I think I oversimplified a bit. I'm actually trying to animate some nodes inside an SVG file and they aren't in order. So I forked your pen and came up with this method of animating elements that aren't quite in the right order. https://codepen.io/swansondesigns/pen/mdjBXgB Because I want the "person" to appear first, but the person nodes aren't in order, I just grabbed a separate node list for them and added them with .item() by node number using the counter. This seems to work just fine. Is this how you would do it? @GreenSock Thank you for taking a look and also for the tip about updating the easing setting. I will make sure I get them from the ease visualizer from now on. I probably just copied something from an old tutorial.
-
Hello, I am learning more about GSAP in anticipation of needing it more on an upcoming project. I've been practicing by animating some free SVG files that I found. One of them has some speech bubbles that I thought would be cool to animate popping into existence followed by the lines of text within the bubbles animating in. One of the rules around here is minimal demos, so here is where I started (please think of the green boxes as text bubbles and the white within as lines of text). Version 1: Works, but it's long https://codepen.io/swansondesigns/pen/PoBJqaE This works exactly as I want, but, as you can see, it's pretty manual to get everything to work properly. This seemed pretty silly since I'm doing the same animation for each item. So I tried again. Version 2: Ordering is wrong https://codepen.io/swansondesigns/pen/RwBLPEL This was not successful because the animation on the bubbles happens first and then the animation on the text happens second. I researched "gsap effects" and that seemed promising, so I gave it a try. Version 3: Works, but is it done properly? [This is the one below this post] My basic question is "Is this done properly?". Is this how an expert would do it? It seems right, but I'm going to be doing a LOT of this pretty soon so if there is something that I can do better or more efficiently I'd like to fix mistakes now. If I get stuck later because I didn't understand the downside of this approach I'm going to be upset that I didn't take the time to have someone check my work. If I'm being honest, I thought I would be writing a function and passing elements to the function. But that seems to mostly apply to individual values rather than creating animations themselves from a function. I really appreciate that this forum exists and if there is anything else I can provide to make it easier to answer this question please let me know. Thanks, Graham
