[Scrubbed scroll animation - animate initially]

I've come up with a solution but it's probably not very elegant or DRY.

See the Pen qBGOygM by 1976ltd (@1976ltd) on CodePen

[Scrubbed scroll animation - animate initially]

10 hours ago, Cassie said:

Hey!

 

You can clamp your triggers to ensure that the trigger points fall between the min and max scroll positions.
 

 

 

 

Thanks @Cassie. That seems to work really well in your video with the rotating boxes but in the Codepen when clamp is added the first h2 doesn't animate in. Is this something to do with it being a 'from' rather than 'to' tween?

[Scrubbed scroll animation - animate initially]

15 hours ago, thehaes said:

Not sure what you're trying to achieve, do you want to animate it in when the page loads? Or you want it to scrub like all others? I would probably put some conditional to check if it's the first h2 then modify the start & end values, something like this:

let animateElementsCT = document.querySelectorAll('[animate="come-together"]');

animateElementsCT.forEach((animateElement, index) => {
	let isFirst = index === 0;
      
	let typeSplit = new SplitType(animateElement, {
		types: 'lines',
		tagName: 'span'
	})
        
	let lines = animateElement.querySelectorAll('.line');
        
	lines.forEach((line, index) => {
		let config = {
			trigger: line,
			start: isFirst ? 'top top' : 'top bottom',
			end: isFirst ? 'center top' : 'center center',
			scrub: true
		}
		gsap.from(line, {
			x: index % 2 === 0 ? '-100%' : '100%',
			opacity: 0,
			duration: 1,
			ease: 'sine.out',
			stagger: 0.1,
			scrollTrigger: config
		});
	});
});

But again, I'm not sure what you're trying to do and with your current setup it kind of doesn't make sense animation-wise. I think you should make an empty div at start with 50vh height (or even 100), so the scrollTrigger actually have space to animate it. Other idea is to just animate the first paragraph/lines with normal tween and not scrollTrigger

 

Thanks @thehaes. This is a nice idea but I need this to work for multiple pages where sometimes the first h2 will be in the viewport on page load and sometimes it will be further down the page. Basically I want to have my cake and eat it, ie; each h2 should scrub animate on scroll but if it's already in the viewport it should animate automatically into place.

[Scrubbed scroll animation - animate initially]

Hi, how would you go about making the top h2 element animate in initially?

Since the animation is triggered by entering the viewport and scrubs, the first h2 doesn't animate in. Thanks.

See the Pen oNRjLLd by 1976ltd (@1976ltd) on CodePen

[Start and repeat timeline X seconds in, repeat X seconds before end]

@GreenSock Wow, that's absolutely perfect. Thanks for that! Very elegant.

[Start and repeat timeline X seconds in, repeat X seconds before end]

Thanks @Toso

I also found that post and tutorial earlier today which is quite helpful but I haven't been successful yet in adapting my animation to the concept. Everything I've done seems like it should work but the repeats don't do what I'd expect.

 

See the Pen NWJwYKJ by 1976ltd (@1976ltd) on CodePen

[Start and repeat timeline X seconds in, repeat X seconds before end]

I'm attempting to make a seamless loop out of a timeline where there is a sequence of images stacking on top of each other and scaling.

My thinking is to repeat the last image and start the timeline at 1.3 seconds then set it to repeat 1.3 seconds early which is a good point to be able to loop.

 

I've tried

mainTimeline.time(1.3);

and

repeatDelay: -1.3,

but can't get either of these to work how I'd like. The negative repeatDelay seems to alter the length of the timeline and I don't know how to apply the time(1.3) to each repeat.

Any help appreciated.
 

See the Pen KKEyQZJ by 1976ltd (@1976ltd) on CodePen

[Newbie question, external swf]

Okay, finally figured it out. Nothing to do with TweenLite or flash at all.

 

I had the embedSWF path as an absolute path using the local ip address but was accessing the page with localhost in the url.

 

Not sure why this allowed the external swf to be loaded but it broke the tweening somehow.

 

Using a relative path has fixed it.

 

Thanks.

[Newbie question, external swf]

Hi, Thanks for the response. I'm using the same version yes, the fla files are in the same directory as the gs folder and both are importing the class from there.

 

There's no crossdomain issue either. I'm just testing locally and both swfs are in a folder called swf which sits in the same directory as the html file ie;

 

index.html

swf

img

js

 

I'm using swfobject v2 to embed the main swf if that's any use?

[Newbie question, external swf]

Hi,

 

I have a main movie file which has some tweens using TweenLite. At the end of the final tween I am calling a function to load an external swf into a container mc.

 

loadExternalSwf = function () {
loadMovie("swf/myExternalSwf.swf", "container");
}

 

This is working fine. I then have further tweens inside the external swf which work perfectly as a standalone file. Once it is loaded into the main swf however, the TweenLite class no longer seems to work. The tweens don't do anything. I have tested that this is not a pathing issue.

 

I am calling the class in the external swf on the frame with the tweens ie;

import gs.*;
import gs.easing.*;
TweenLite.from(this.myMC, 5, {_xscale:0, _yscale:0, ease:Elastic.easeOut, delay:0});

 

Can anyone see something obvious which I have wrong here?

 

Thanks