ekfuhrmann

Members
  • Content Count

    21
  • Joined

  • Last visited

Community Reputation

9 Newbie

About ekfuhrmann

  • Rank
    Member

Recent Profile Visitors

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

  1. ekfuhrmann

    Animating grid items on click

    @OSUblake with the help of your Codepen and a much simpler Class system, I was able to really improve the Codepen to a much better spot, but I'm running into one minor issue. I made the details image always visible and set it to grayscale so you can see what I'm talking about, but after running the animation once, it seems like my b.top is off by ~25px. Looking through both the Open and Close function I can't identify anything that could be causing it and was wondering if you may see something I'm missing. I also have a question regarding the following: this.image.style.cssText = ""; Is there a specific reason you used this over a clearProps within the Close timeline? Updated Codepen: https://codepen.io/ekfuhrmann/pen/EOKrEJ Again, thank you so much!
  2. ekfuhrmann

    Animating grid items on click

    @OSUblake Wow. Here I was working on a new example to simplify and refactor as @Carl rightfully suggested how confusing it was to follow and understand -- then I see your post regarding flexbox animation via capturing start/end position which got me excited -- AND THEN you drop this codepen on me. Your expertise and knowledge never ceases to amaze me! Just incredible, thank you! It's late right now and I've been working through this all day so I'm going to get some sleep and come back into it fresh tomorrow and really look through how you went about doing it. I'll most likely end up dissecting a lot of what you did to try and learn it better and adapt it for the current draft I was working on, but just having this resource will be of tremendous help. I'll absolutely be sure to reply back here and share what comes of it all, but in the meantime, again, I just can't begin to thank you both for the assistance and help you have provided. Honestly, you guys make up one of the best dev communities out there that I've come across, so genuinely thank you for that.
  3. ekfuhrmann

    Animating grid items on click

    I've made some adjustments from the original post, but I wanted to bring up a newish issue I've run into. The scaling works on the initial click and play through, but on subsequent play-throughs it no longer is applying the `from` width property. In addition, and really may be related, I have issues resetting /reversing the animation. A lot of what I tried has resulted in flickering or multiple timelines playing at once, so that's still a sore-spot I'm working through.
  4. ekfuhrmann

    Animating grid items on click

    I should start by sharing the inspiration for what I'm trying to re-create via GSAP. https://tympanus.net/Development/ExpandingGridItemAnimation/ In this example, when a grid item is clicked, the metadata for that item is captured and then populated into a modal-like view while transitioning the image (in this case a guitar) to a new location. I was able to get the metadata stuff working no problem, but have run into issues when trying to have my image transition from the clicked grid to the modal resting place. I'm a bit stumped where to go for this transitional animation. As you will be able to see in the codepen, I tried playing around with capturing the starting/ending positions and using Transform to transition it from the starting place to the resting, but things are just not lining up or working -- specifically when it comes to scaling it. Also, I'd be interested to hear some thoughts on best way of closing, or reversing the animation. I'm aware of `tl.reverse`, but since I'm killing this thing once done I'm not really sure best approaches for tackling that. I'm definitely new to OOJS and this is really my first time playing with Classes, so apologies if I set stuff up poorly. Lastly, I've also gone ahead and attached the JS file used in the tympanus demo. They used Anime for the transitions, but it may help provide some more clarity for those of you who understand GSAP/Classes better than myself: main.js
  5. ekfuhrmann

    Possible bug for 0ms tweens within a nested timeline

    Great call on the suggestion of using set() rather than to(). I swapped it to a combination of set() and immediateRender:false to get the desired effect, but it still seems strange to me that a nested timelines set() and zero duration tweens will fire immediately even with the parent timeline paused. Nonetheless this solution works well for me. Cheers!
  6. I came across a possible on load bug when trying to transition between two scenes which required a `display` change. I'm using a nested timeline to transition out 'Scene One', and then another nested timeline to transition in 'Scene Two'. Since these scenes are overlaying atop one another, I'm changing the `display` from `flex` to `none` and vice-versa depending on if the scene is coming or going. Since `display` is not animatable, I really didn't need to set a tween duration so I used `0`. For some reason it seems like despite the parent Timeline being `paused`, this forces the tween to run on load. Adding any other number > 0 will result in it working as expected. For my Codepen example, I am sharing the buggy approach. On load, you'll notice that `.scene.two` is showing (scroll down), and that the console is printing some text showing that the tween ran. If you click `.scene.one` it will animate properly to the next scene, and then clicking `.scene.two` will properly take you back to scene one, at which point it is now working correctly. The trick I came up with to resolve this issue was to pause the nested timelines. This does indeed resolve the issue, but it does seem like there may be some buggy interaction causing `0`s tweens to run early, even if they are nested in a paused timeline. I included some JS commenting to hopefully help clarify, but let me know what you think and whether or not I was misguided with my initial approach.
  7. ekfuhrmann

    GSAP Stagger Reveal on load followed by scroll revealing

    Fantastic, that did it! I can't begin to thank you enough with helping me through this process. I'll be updating the following Codepen so that anyone who should stumble across this can see how it all came together. Many thanks!
  8. ekfuhrmann

    GSAP Stagger Reveal on load followed by scroll revealing

    I actually initially tried that approach but wasn't making proper use of the relative position parameter. This is working significantly better than before, but still a bit strange when new rows come into view. It seems like the first or second box of new rows is ignoring the delay parameter or something along those lines, resulting in some speed up for the boxes staggering in. Forked a new pen, any thoughts? EDIT: Upon playing around with it further, I think I know the root of the problem but am not sure how to work around it. Since we're staggering each animation by `-=0.3`, this only works if it has something to stagger against. In a new row, it is starting at 0s, and then the subsequent tween is stating after 0.2s of the first since the animation is 0.5s long. This is causing it to appear to load quicker than intended. Is there a way to identify if the TL is starting up again and then changing the stagger for that first iteration of the new row?
  9. ekfuhrmann

    GSAP Stagger Reveal on load followed by scroll revealing

    Alright, it's been awhile since I last posted in this thread, but I'm back now with an updated Codepen that makes use of the suggested Intersection Observer API, which truly is awesome. @PointC, thank you so much for the article as I found it really helpful for all sorts of other purposes beyond GSAP. In the following Codepen you'll see that initially the animation works as intended, but I'm using an incremented Timeline `delay` to create the stagger effect of elements that are in view. As you can maybe expect, the issue is that the incrementing does not reset upon a new row of elements coming into the view, lending way for some seriously long delays between elements if you scroll slowly. I feel like I'm almost there, but have been struggling to get over this hurdle. Let me know what you think!
  10. ekfuhrmann

    GSAP Stagger Reveal on load followed by scroll revealing

    The Intersection Observer API looks really interesting. I'm messing around with it a bit to try and understand it better, but I'm also unsure of how I'd then go about combining it in my timeline. Honestly, it seems more like a replacement for ScrollMagic than anything else, so I'm not entirely sure how it would help in my instance of staggering the first few elements, and then revealing the rest on scroll. I have no issues with the scroll revealing, it's the staggering of the first few that gives me problems - even when I break them out to a new stagger timeline. If this can be done better with the Intersection Observer API, I'm willing to drop ScrollMagic, but I struggled to find working examples of implementing it with GSAP that I could understand.
  11. POST RESOLUTION EDIT: For anyone who may come across this, I was able to find a solution to this issue without the need of ScrollMagic. Should you want a vanilla JS solution, continue down the thread! ---- Hi there. I have a responsive site where I want the content to stagger reveal as the user scrolls. The issue I'm having is that on load, the first few items (depending on screen height) are above the trigger and therefore just animate in together as opposed to staggered. Is there a way to have it so that the content that loads immediately staggers, and then the remaining elements animate like normal on scroll via ScrollMagic? ScrollReveal has a pretty good example of what I'm going for, with content staggering in on load, followed by then animating the lower elements in on scroll. Thanks!
  12. ekfuhrmann

    Animating between a list of items inside another timeline

    This was helpful and I'm definitely getting closer. Building off of your Codepen I modified it slightly to better reflect the issue I'm running into. Since it's building the timeline each time for the list, it's overriding the prior element and ends up only looping the final iteration of the list. I'm probably missing something simple here to get this working.
  13. ekfuhrmann

    Animating between a list of items inside another timeline

    @PointC, I get what you're saying about placing the tweens into their own individual timelines, but I'm really struggling with how to achieve that within this project. I've made a mess of a forked codepen trying to get something remotely resembling what you suggested but to no avail. I looked at some other nested codepens but the ones I have found tend to be hover animations, rather than a looping list of names. Any suggestions?
  14. ekfuhrmann

    Animating between a list of items inside another timeline

    You understood exactly what I was asking, so thank you for that! It goes without saying that you and the rest of the GSAP team are absolutely incredible and helpful, and I can't thank you all enough! With your provided codepen examples, I was able to get pretty close to the animation I was aiming for; however it seems for every hurdle I jump over, another one comes up. I have the following timeline: tl .from($marqueeLine, 0.6, {width: 0}, 0) .fromTo($marqueeTitle, 0.6, {y: '+=100', autoAlpha: 0}, {y: '100%', autoAlpha: 1}, 0.1) .add('endLine', '+=2') .add('startList', 'endLine') // Animite in tagline[1] .from($marqueeListItemFirst, 0.4, {scaleY: '0', autoAlpha: '0', transformOrigin: '100% 100%'}, 'startList') // Animate title .to($marqueeTitle, 0.3, {y: '0%'}, 'startList') // Animate out tagline[1] .to($marqueeListItemFirst, 0.4, {autoAlpha: 0, rotationX: '90deg', transformOrigin:'0% 0%'}, 'startList +=5') .add('start') // Animate in the other taglines -- tagline[2], tagline[3] .staggerFrom($marqueeListItemNotFirst, 0.4, {autoAlpha: 0, rotationX: '90deg', transformOrigin:'100% 100%'}, 5, 'start -=0.25') // Animate out the other taglines -- tagline[2], tagline[3] .staggerTo($marqueeListItemNotFirst, 0.4, {autoAlpha: 0, rotationX: '90deg', transformOrigin:'0% 0%'}, 5, 'start +=4.65') // Animate tagline[1], tagline[2], tagline[3] on loop .add(loopListTween, '-=0.3'); // start early so that transition is seamless Everything animates and is timed correctly up until we get inside 'loopListTween' var loopListTween = new TimelineMax({repeat: 2}); loopListTween .add('startListLoop') .staggerTo($marqueeListItem, 0.4, {autoAlpha: 1, rotationX: '0deg', transformOrigin:'100% 100%'}, 5, 'startListLoop -=0.6') .staggerTo($marqueeListItem, 0.4, {autoAlpha: 0, rotationX: '90deg', transformOrigin:'0% 0%'}, 5, 'startListLoop +=4.9'); // When this finishes repeating, there is a delay between the start and end. How would you remove the delay between repeats? In the master timeline, I have this loop start 300ms early so that it seamlessly continues from the 'Animate out' tween. This works fine initially, but then does not work once within the loop, causing there to be a couple hundred MS delay between when the loop ends and the next iteration begins. Any suggestions on what I can do there? Or suggestions to make this timeline more manageable? Updated codepen can be found below. I should also mention that while your codepens were super helpful in getting me to this point, 'autoAlpha' has proved a real pain to manage as it seems that the later tweens using it override the earlier ones. This is what has lead to my 'loopListTween' having two 'staggerTo' tweens rather than the 'staggerFrom' and 'staggerTo' tween I used earlier for the partial cycle. Again, thank you for the time you've put towards helping me. I've learned a whole lot through this process so far.
  15. ekfuhrmann

    Animating between a list of items inside another timeline

    Apologies for not being clear the first time, hopefully this makes more sense! I removed a lot of the unnecessary elements to make it more clear. I also added better comments into the JS to help explain what should be happening throughout the timeline. What I'm trying to have happen is for the first item in 'marquee__list-item' (tagline one) to have a different animation from the rest of the list items the first time it animates. Once that animation has passed, I then want to cycle through all of the taglines (tagline two, tagline three, tagline one) with the same animation which just repeats. My issue is that the list tween impacts my tagline one animation on the first pass. It then also has some delays in it between its repetition which makes it really easy to identify where the repeat is for it. That I know I can fix with better timing, but I'm struggling breaking out the first item animation within the list from the repeat tween that I would like to run for all of them.