Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by ekfuhrmann

  1. @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:

    See the Pen EOKrEJ by ekfuhrmann (@ekfuhrmann) on CodePen


    Again, thank you so much!


    • Like 1
  2. @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.

    • Like 2
  3. 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. I should start by sharing the inspiration for what I'm trying to re-create via GSAP.




    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:


    See the Pen dQMZyO by ekfuhrmann (@ekfuhrmann) on CodePen

  5. 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.



  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.



    See the Pen YvJYvQ?editors=0011 by ekfuhrmann (@ekfuhrmann) on CodePen

  7. 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?



    See the Pen OZzZNq?editors=1011 by ekfuhrmann (@ekfuhrmann) on CodePen



    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?

  8. 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!


    See the Pen xYwgGm by ekfuhrmann (@ekfuhrmann) on CodePen


  9. 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.

  10. 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.



    See the Pen YeXgXz?editors=1010 by ekfuhrmann (@ekfuhrmann) on CodePen

  11. 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.


    See the Pen BwBGoJ?editors=1010 by ekfuhrmann (@ekfuhrmann) on CodePen


    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.


  12. @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?

  13. 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:


        .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')
        // 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});
        .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.


    See the Pen JyLNPE by ekfuhrmann (@ekfuhrmann) on CodePen



    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.

  14. 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.



    See the Pen JyLNPE by ekfuhrmann (@ekfuhrmann) on CodePen


  15. To start off, I'm going to share an example of the animation I am trying to recreate. The key takeaways are that I want the first element in the list to animate differently than when the list is cycling through itself. This means that I need a one-off animation for the first list item, before it then sequences through a list that should repeat a couple times.


    I was able to animate the first list item the way I wanted initially, but the moment I added listTween, the alpha was no longer visible due to the staggerFrom's.


    How can I break off the first-one (something like first-of-type) and then cycle it back into the repeated animation thereafter?


    The second issue I'm struggling with is that the listTween between repetitions has a delay in which none of the listItems are visible. Is there a better way of setting this up so that they sequence for 5s at a time, but don't delay in repeating the loop?




    Edit: I've made some minor tweaks so that my first list item is displaying, but still unsure of how to start the tween at the second list item and then circle back in the first one after it repeats.


    See the Pen EvoBdq by ekfuhrmann (@ekfuhrmann) on CodePen

  16. Hah, well that's a bit embarrassing. That did indeed resolve my issue.


    The Codepen is still very much a WIP so no worries about being unsure of what was going on. Thanks for the assist and for saving me from any more hours of trying to figure out where I was going wrong. 

    • Like 2
  17. I'm building an intro animation in Codepen and I wanted to tween the pseudo element `.marquee__tagline--logo::before`. I saw that this can be done using CSSRulePlugin, however it is just keeps throwing out errors.


    The pseudo element is showing up in dev tools, and it clearly is rendering on the page, so I'm unsure of what I'm doing wrong here. Any help would be greatly appreciated!

    See the Pen EvoBdq by ekfuhrmann (@ekfuhrmann) on CodePen

  18. In the attached codepen I have a timeline in which `blocks` stagger into the display.  That all works fine and well, but I'd like to make it so that the `autoAlpha` property runs a bit quicker than the rest -- for instance 300ms rather than 600ms.


    Is there any way of achieving this type of interaction with certain properties within a stagger going quicker than the rest?

    See the Pen BdZXMQ by ekfuhrmann (@ekfuhrmann) on CodePen