elegantseagulls

@Kristy H If you have control over your CSS or an overwrites file, just target the classes that are applying the transitions and add transition: none;

I'm not sure why this is, but changing scrub to true instead of 0.2 seems to fix the issue. Is this expected behavior @GreenSock (cc: @OSUblake @Cassie)?

Because that animated circle text is being appended as a child of your cursor, so it's getting the scale property from its parent.

This is tricky because you'll have to tween the h3 back to its original position, or it doesn't have a context of where it's really starting from...
 
With what you have going on the forEach, you are creating a new timeline for each iteration.
 
This solution adds to a single timeline onEach, then goes back to its original position:

See the Pen JjyMpRx?editors=0110 by ryan_labar (@ryan_labar) on CodePen

Yes, you'll need to register your plugin gsap.registerPlugin(ScrollTrigger), and will also need to import the ScrollTrigger files.
 
Good info here: https://greensock.com/docs/v3/Installation
Scroll down to the GSAP 3 Install Helper and look at the Modules section (if you're using next you'll need to import from 'dist', instead).

(you also called it ScrollMagic in your original question, which is a "competitor" product to ScrollTrigger)

I believe you'll need to add a video.load in your onEnter; it's not like loading images. You could just set the preload attribute to 'none' preload="none" and then just run video.load, instead of adding the src.

Easiest way would be to just create a ScrollTrigger batch on open function, then kill it on close.
 
A bit more complex would be to:
You could setup a var to check if the Accordion has been opened, and if it hasn't, setup your ScrollTrigger batch function on first open, then use open close functions to reset/enable/disable your ScrollTriggers.

In next.js you'll likely want to import the TextPlugin via import { TextPlugin } from "gsap/dist/TextPlugin";

You can animate strokeDashoffset, and all other svg attributes in gsap just as you would any other property.
 
Maybe your target isn't accurate for your animation? also make sure your case is correct strokeDashOffset strokeDashoffset
 

See the Pen GRmqbpY by ryan_labar (@ryan_labar) on CodePen
 
For fine tuning your strokeDashArray animation, check out the DrawSVGPlugin: https://greensock.com/docs/v3/Plugins/DrawSVGPlugin 
 
Also, we don't recommend using ScrollMagic. GSAP has ScrollTrigger: https://greensock.com/docs/v3/Plugins/ScrollTrigger

Hi @Tonycre8,
 
The className plugin was removed in gsap version 3. More info here: https://greensock.com/3-migration/#className
 

I assume you're talking about the logo animation. If you inspect it, it's just two SVGs stacked on top of each other with parts of each being animated and cross-faded. No need for Morph of Flip or anything extra for that.

The way I'd approach this would be to set a full-height container that I'd pin for the duration of your animations then create a single gsap.timetime for all the columns and content inside that container and use ScrollTrigger's scrub feature to move through that animation timeline while the container is pinned.
 
A good way to approach / set this up would be to first make your timeline play through nicely without any scrolling, then append that to the scroll/scrub/pin and adjust the duration (distance) of the pin to match the feel of your desired animation at a natural scroll speed.

Ah, I see. For this instance, you may consider setting up a ScrollTrigger.create({...}) then use the onToggle with isActive (https://greensock.com/docs/v3/Plugins/ScrollTrigger/isActive)(or onEnter, and onEnterBack) to run a gsap.to() tween, that way gsap shouldn't have a preset memory of the "0" position.

Basically:
 
ScrollTrigger.create({ trigger: ".section04", onToggle: self => { if (self.isActive) { gsap.to('.list', { y: -105 }) } } })  

I'm not seeing any ScrollTriggers in your CodePen, but you'll likely want to do something like:

 
onEnter: () => { map.setView([-300, 425], 3) },  

It's not working because the parent is being transformed so then the child element looses it's fixed-position context. Adding pinReparent: true, to the child element's ScrollTrigger should fix this, (you'll want to be careful when using this as you'll loose descendant styling, if applicable). More on this here: https://greensock.com/docs/v3/Plugins/ScrollTrigger
 
 

The stroke completes itself at a stroke-dashoffset of about 71 in your example, so that's why it's appearing like it's finishing early. So you may want to tween to that instead. Or use the DrawSVG plugin to avoid any 'trial and error' oddities like this.

I'm not really familiar with Locomotive, but the simplest solution I can think of is wrap the trees in a div and tween that div with Locomotive and tween the images with gsap, so there is no conflicting transforms.

Another option would be just to duplicate your content and transform the whole container to -50% and just repeat that:
 

See the Pen RwoPbdb by ryan_labar (@ryan_labar) on CodePen

@kalimschka
 
Thank you for updating your codepen. It's much easier to read now! I think you're just wanting to have everything scrub off the maintimeline, instead of trying to add more scrollTriggers inside the initial pin.
 
Try replacing your JS with this:

 
// // PLUGIN REGISTRATION // gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); // // Create section // gsap.timeline({ scrollTrigger: { trigger: '#section-2', scrub: true, pin: true } }) .from("#section-2 header h2", { opacity: 0, y: 150 }) .from("#section-2 header p", { opacity: 0, y: 150 }) .from("#section-2 header .arrow", { opacity: 0, y: 150 }) .from(".references", { opacity: 0, y: 200 }) .from("#schlaf", { opacity: 0, y: 200 }) .from("#angst", { opacity: 0, y: 200 }) .from("#depression", { opacity: 0, y: 200 }); You can adjust the timing of everything with markers/duration, if needed too.

Hi @Lichay,
 
I'm not entirely sure what you're looking for but I'm thinking you just need a repeat, yoyo, and a repeatDelay:
gsap.to(element, { y: 200, scale: 1.3, repeat: 1, yoyo: true, repeatDelay: 2, });  

Well I figured it out. Sorta. It was breaking due to the .from() I was using with DrawSVG. I needed to set the length to 0 and use to(). 
 
Solution is here: