Visual-Q

Can't really give you any advice on loc scroll as I've never used it but is this what you were after? Moving header outside of scroll element seems to work. https://codepen.io/Visual-Q/pen/MWbOGMq

Not sure what you are trying to achieve but this shows z axis movement on card 2 to point you in the right direction hopefully. You can find out more about how gsap handles transforms in the docs: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin https://codepen.io/Visual-Q/pen/bGBYMYB

I try to write vanilla whenever possible. Sometimes I cheat and use jQuery since I do mainly Wordpress so It's alway there. Like @elegantseagulls i use it so rarely that I forget most of the syntax and have to look it up much of the time, so I usually just investigate how to do it in vanilla, I learn a lot more that way.

As PointC said it's beyond the scope of this forum to investigate how to set things up for every platform out there. I would expect there must be some shopify documentation to assist with loading external javascript you'll have to chase that down yourself. Assuming you've got that far here's a few basic rules of thumb that may help. 1. Verify gsap is loaded you can inspect in the browser tools to look for it in the source code should be in the footer area of the page code. 2. Verify your animation file is being loaded AFTER gsap. 3. Check the console for any errors such as not finding your target elements and add some console logging at critical points so you know if the code is executing. 4 Consider executing animation after a window load event to make sure the DOM and assets are ready. https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Just a shot in the dark. Are there any issues with running ES6 on android before 10? Maybe try replacing the foreach with es5 implementation. Also are you talking about in a specific browser?

You could use an onRepeat callback with a Yoyo https://greensock.com/docs/v3/GSAP/Tween https://codepen.io/Visual-Q/pen/GRqWovb on an onComplete without a Yoyo https://codepen.io/Visual-Q/pen/wvWJMRW

This is just a guess as I'm not a vue guy and it's hard to troubleshoot just from code and an image but the fact that it works on reload might suggest that scroll triggers are trying to intialize before items are fully loaded in to the DOM. On reload the elements may be already cached so scrollTrigger can find their positions and properities straight away.

A simple way might be to animate left value 100% to 0%. Instead of a transform. We usually recommend transforms as they are more performant but in your case the animation is simple enough it may work fine just with left movement. Another way would be to add a screen resize event listener and reset the x value and/or timeline accordingly. If you are able to make a codepen of it we may be able to assist more effectively.

Yeah, you don't have to look at it in terms of vs GSAP. Lottie/Bodymovin plays nice with using gsap as a control structure. The one instance i had to use it was when I had a bunch of stock vector icon animations in AE and used BodyMovin to export them for the web, and gsap timelines to control them together with scrollMagic. With the new ScrollTrigger in gsap they should pair up even better. So you can have the best of both worlds. There are several examples on copepen of using them together.

For a consistent velocity you could pass a calculated value to duration something like this: distance: https://www.purplemath.com/modules/distform.htm distance equation simplified by @OSUblake : Math.hypot(x2 - x1, y2 - y1) speed: whatever you want duration = distance/speed EDIT: Pen has been updated to utilize Jack's function with Blakes equation (see following posts): https://codepen.io/Visual-Q/pen/gOrVEmE

I don't know what kind of device you are using but it you can adjust the resolution - for instance halving that would still look plenty sharp at a distance and you'd only be rendering 25% as many pixels.

It does seem problematic with using toggleClass. I could set it to reverse but toggleActions did not seem to prevent the class from being removed at end of trigger. Is this expected? I would have expected "play none none reverse" or "play none reverse none"should have prevented the class from being removed when it reached the trigger end? You could animate the filter value using css variables instead: https://codepen.io/Visual-Q/pen/poyBgoG

I quite like that effect from the site you showed: https://www.ecwid.com/?fbclid=IwAR2ygAek1LtYvPiQbq2x8P9vOfmzGO4zKM8sQRNVySt29cSApJB2O71JtaY So I figured it was a good excuse to practice my ScrollTrigger and transform skills. Kind of finicky working out the css, there's a few different ways you coudl approach that. This seems to work pretty well. https://codepen.io/Visual-Q/pen/RwadBgG

You could do several things: I might use an onComplete like this. However one other thing you need to consider is what happens if you scroll during the intitial animation, you would probably also want to be preventing window scroll during this time as well. Note: with the scroll disable on the window you don't have to wait to init the scrollTrigger timeline in the function but I showed it that way so you can see how it waits for the onComplete before the markers appear. https://codepen.io/Visual-Q/pen/JjXzGQL

I'm not exactly understanding what's supposed to be happening however I'll take a stab in the dark: I believe you can use !isActive() / isActive() to test for pause and resume and I'm not sure why you need to check onUpdate. Presumably your play pause buttons are supposed to initiate these events so you could attach a function to the button actions to check if a timeline is paused or running and do what is necessary at that point.

Improved example of previous: This will prevent duplicated tweens being created if buttons are errantly clicked, and waits for end of current iteration on timeline before adding tweens, so you don't have to tell it to replay from start. https://codepen.io/Visual-Q/pen/RwaELbw

Basically just added a parameter to the function, function ifElseAnimateBorder(ring) we pass the parameter value [ringx] in the delayedCall gsap.delayedCall(2, ifElseAnimateBorder,[ring1]); and use it as the target for the tweens added to the timeline .to(ring, 2,{scale: 1.3, ease: "power2.out"}, 0) then tell the timeline to play from the start you could also use restart instead. buttonPulse.play(0);

Was this what you meant: https://codepen.io/Visual-Q/pen/ExKOpQZ or this https://codepen.io/Visual-Q/pen/oNxQPXM

Yeah I'm not seeing how pinning works into what you're describing. The problem is the pinning and animation starts when the container hits the top of the viewport. I think you're looking at a separate trigger for the animation, something like this. I also removed the need for the container to be at least 100vh so it can take the height of the content by putting the end section in the same parent. https://codepen.io/Visual-Q/pen/bGpQLMv

If you don't want to overflow the end section you also need to force the container to include the height of the floats with a clearfix, on the .innerWrap, and .bg_red height:auto since 100vh doesn't always enclose the content and .bg_red min-height:100vh will then make sure the first panel also won't extend past it if auto height is less than 100vh. https://codepen.io/Visual-Q/pen/ZEWmbZL I would suggest using flex though, floats are not really necessary anymore a flex is far superior. https://codepen.io/Visual-Q/pen/YzqRyOj

I don't promise that this is the best setup as I haven't had much time to explore ScrollTrigger but maybe something like this: https://codepen.io/Visual-Q/pen/VwaEGro

Checkout the modifiers plugin and carousel wrap demo. Thats a good place to start. https://greensock.com/docs/v3/GSAP/CorePlugins/ModifiersPlugin https://codepen.io/GreenSock/pen/QEdpLe

Couple of pens from back in the day using calc and css variables from Blake: https://codepen.io/osublake/pen/OvbqXL https://codepen.io/osublake/pen/348b53aa3d39c06a9bf3eba7e0359bc8

The if statement checks if a string in the case of mine "about" is present in the url by seeing if the index position of it in the entire url string is greater than 0 (hint:there are no index positions below 0 - see how that works). In the case of yours you are only looking for the presence of an "/" which would be present on most if not all urls. If you are going to conditionally load based on a page url you would have to test for something unique to that url. I suggest you examine the url of your admin page and your public facing pages to see if you can find something to use. It might be "template" or the next set of numbers in your case. See: https://www.tutorialrepublic.com/javascript-tutorial/javascript-window-location.php https://www.tutorialrepublic.com/javascript-tutorial/javascript-strings.php https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf Note there's no guarantee that using the url as a test is the best option, you can also look at other things like using a class on the body if you find something unique often a CMS might add something like admin there. https://stackoverflow.com/questions/9532639/how-check-if-body-has-a-specific-class-with-javascript/9532714 As Shaun noted usually the CMS would be structured so the front end code and the backend admin are separate, to avoid these kinds of issues. The backend should be an interface to work with the database not utilize the front end presentation.

You would want to look at scrollTrigger: