[Performance issue with ScrollSmoother + Barba.js]

Totally understand, I knew it was a long shot, I just can't get the problem to replicate in a codepen. I did just pick this up from another dev and am still kind of orienting myself, so I may make some more discoveries on what's happening. 

 

I'll ensure all your suggestions above are properly implemented, and if I find out anything else that may point us in the right direction I'll post back here with either further details or an answer that can help folks in the future. 

 

Thanks for your help! GSAP is a joy to work with, as always.

[Performance issue with ScrollSmoother + Barba.js]

Wanted to add one more piece of detail to this - starting on the homepage, navigating to another page, then navigating BACK to the homepage without a hard refresh also does fine. It only appears to be an issue if you start with a fresh browser reload on another page and then navigate back to home. 

[Performance issue with ScrollSmoother + Barba.js]

Hey all, 

 

Unfortunately, I've tried to recreate this issue in Codepen, and it's just not working, so I'm linking the development environment for the site as well as a super-simplified version of our JS file for the site. The issue I'm running into is with ScrollSmoother interacting with barba.js. For anyone unfamiliar, Barba is an AJAX-based page transition library that loads new pages without a browser refresh in vanilla HTML/JS sites. You should be able to see the problem behavior in the dev environment - if you load the homepage fresh, ScrollSmoother inits and works fine. However, if you navigate to the History Page and then transition to the homepage via Barba by clicking the logo "Mining Exchange Hotel", the scroll on the page is super laggy, and running a performance profile, it appears to be related to a reflow issue originating in ScrollSmoother. Should I be trying to manage these two libraries together in a different way? You can see in the js file that currently, we're killing the smoother before the page transitions and re-initializing it before the new page enters, but the same behavior persists even if I comment those out and maintain the same smoother instance throughout all the page transitions. Thanks in advance for any help. 

[FLIP with Vue - how to FLIP an element entering the DOM?]

@GreenSock awesome. Thanks so much for your help.

[FLIP with Vue - how to FLIP an element entering the DOM?]

Hey all! See attached pen. The idea is when you click a card, it removes that card, then fetches a new batch of data and adds a card with that new data. Everything seems to be working as intended except that the new incoming card isn't getting included in the FLIP animation. It makes sense why, as it's not even in the DOM yet when I'm running Flip.getState(), but I can't think of a way to get around that. Is what I'm asking for here even possible or do I need to think of another approach? Thanks!

See the Pen eYMmKdN by kslaton (@kslaton) on CodePen

[Strange behavior when FLIPping an element with a hover state]

@GreenSock I think so. So the solution here would be to handle that hover effect using js? 

[Strange behavior when FLIPping an element with a hover state]

Hey all. See above pen. I'm running a relatively simple FLIP animation, but when I assign a hover class to each box, the FLIP still animates correctly, but there's a flash of the boxes moving around afterward. If you comment out the &--canHover bracket set in the SCSS, it works as predicted. Any ideas why this might be happening and how I can work around it? Thanks!

See the Pen LYQrpdL by kslaton (@kslaton) on CodePen

[ScrollTrigger side scrolling super jumpy in Safari]

@elegantseagulls perfect. I removed the pin-in-fixed because I realized I didn't need the fixed div on that specific page, so that may have removed it. Thanks for your help!

[ScrollTrigger side scrolling super jumpy in Safari]

@elegantseagulls do you mind expanding a bit on the native side scroll mixed in? Where are you seeing that? 

[ScrollTrigger side scrolling super jumpy in Safari]

@elegantseagulls thanks for your input here. After doing some research last night, a lot of the performance hit was due to having CSS filters on all the image elements on the page. Didn't realize Safari doesn't like filter. Changing those to box shadow made a night and day difference on local. I will definitely look into your suggestions though, thank you!

[ScrollTrigger side scrolling super jumpy in Safari]

Hey all. This problem isn't something I can really recreate in a Codepen, it's more of a general "why is this behavior happening and what can I do about it" question. I built this page using ScrollTrigger according to the official Codepen on horizontal scrolling sections. It's working totally fine and smoothly for me in Chrome and Firefox, but in Safari it's insanely jumpy. It scrolls halfway down the page vertically then snaps back into its correct place. Has anyone else been experiencing these issues with Safari, and is there anything I can tune in the ScrollTrigger settings to try and smooth it out a bit? 

[PixiPlugin - Best way to animate circle mask radius?]

Hey all, 

 

Forgive me as I'm pretty new to Pixi, which is probably why I can't figure this out. See attached codepen. I'm trying to animate the radius of the circle mask. What's the best way to do this? 

See the Pen YzYWgRj by kslaton (@kslaton) on CodePen

[Vector-Effect: Non-Scaling-Stroke messing with DrawSVG]

Awesome, thanks @mikel and @PointC . After looking into it more I may just go with some absolutely positioned spans to create the edges, especially after what you're saying with FF. This is all super helpful though. 

[Vector-Effect: Non-Scaling-Stroke messing with DrawSVG]

Hey all, 

 

Got kind of a weird one for you today. I'm working on a site with a bunch of offset borders that need to be drawn in from bottom left on scrollTrigger. I want these borders to be 2px regardless of screeen size or SVG scale, so I'm using the vector-effect: non-scaling-stroke property. However, as you can see in the pen, that's causing a funky effect where drawSVG is segmenting the line into 100px segments and drawing them. Anyone know of a different way I can accomplish what I'm trying to do here? Thanks!

See the Pen MWONqVm by kslaton (@kslaton) on CodePen

[Performance issues with nested FLIP animations]

@OSUblake ok that's a good call, thanks for the help!

[Performance issues with nested FLIP animations]

@GreenSock thanks, totally understand and this is all super helpful. I do have one question about Flip returning a timeline. So currently in my code I have 

 

Flip.from(... {
  onComplete: () => {
    gsap.set(... {
      onComplete: () => {
        Flip.from(...)
      }
    })
  }
})

I understand what you're saying about being able to chain the .set onto the Flip.from, but if I've already captured the second FlipState earlier in my code, can I just chain the second .from after the .set?

[Performance issues with nested FLIP animations]

Hey all! Below is a sample of a rather complex animation I'm doing using FLIP on one of my sites. It performs totally fine here, but it's rather complex and in the context of the site with other active scrollTriggers and such going on, it's catching a bit in the middle, when the cards shuffle out from the bottom and sides. Any suggestions on how to make this more performant and just clean up the timeline in general? I get a little stuck with FLIP sometimes since it appears it can't be chained into a timeline like a normal tween. 

See the Pen dyZMVjy by kslaton (@kslaton) on CodePen

[SplitText - Pause/increase stagger delay on divs containing character?]

@OSUblake that definitely looks cleaner, I tried that first but for some reason on my actual site SplitText was breaking my spans into new lines when I called new SplitText. I may go back and do some debugging to figure out why. Thanks!

[SplitText - Pause/increase stagger delay on divs containing character?]

As soon as I posted this, I figured out what was off in the timing. Still open to any critique of the code or suggestions on how to make it cleaner!

[SplitText - Pause/increase stagger delay on divs containing character?]

Hi all, back again! Simple codepen above. I would like to inject a brief pause in the animation after each sentence. I think I'm in the ballpark - I've at least gotten to the point of having an increased stagger based on period position - but something on the timing is off. Any advice? 

See the Pen mdqdqxd by kslaton (@kslaton) on CodePen

[ScrollTrigger - Infinite Loop, starting back where you ended?]

Hey @OSUblake, I dropped your onLeave and onLeaveBack handlers into my pen, and it's looping backwards but not forwards. Any thoughts on why? Edit: nevermind, I see it works when embedded in this window, it just must be something weird with the codepen window in my browser. Disregard!

 

 

[ScrollTrigger - Infinite Loop, starting back where you ended?]

@OSUblake perfect, exactly what I was looking for. Thanks!

[ScrollTrigger - Infinite Loop, starting back where you ended?]

Not sure whether I'm actually going to do this but just curious how y'all would handle it. In the above pen I'm basically moving through 4 quadrants of a square on scroll, and that all works fine. Trying to figure out how I could make it infinite, but it seems like setting body to scroll position 0 doesn't work, unless I'm typing something wrong. Any thoughts? 

See the Pen eYeOxZJ by kslaton (@kslaton) on CodePen

[Problem with FLIPping items staying position: absolute after animation]

@OSUblake ok, makes sense. Thanks!

[Problem with FLIPping items staying position: absolute after animation]

@OSUblake that makes sense and I'll see if I can do that. Out of curiosity though, how would you handle it if the element you're animating has to set the width or height of its parent? Just manually remove the absolute positioning once it gets back in place?