Embedding ScrollTrigger plugin

I know this is an amateur's question, but I having a hard time trying to use the scrolltrigger plugin with hype ( https://greensock.com/scrolltrigger/ )
My main goal is to make a page similar to this https://www.apple.com/airpods-pro/
I ve tried it with scrollmagic but never found out how to make those easy in-out scrollings
Any help would be much appreciated

dizzz

may help on scrollmagic : Where I have to put prepared HTML, CSS and JS?

Hans, i ve downloaded the example before posting, but my problem is that I can't figure out how to make scrolling smoother.
If you take a look on apple's page, the img sequence keeps playings a little, after we stop scrolling creating a smooth effect. In scrollTrigger there's an option called scrubbing, which, if set to 1, it achieves that.
Any suggestions?
thank you in advance

as a playground:
https://www2.aachener-zeitung.de/zva/karlo/test/syncTimelineWithScroll_Momentum/

a animationScrollSync with momentum-effect that can be adjusted ... a hypeonly approach

syncTimelineWithScroll_Momentum.hype.zip (12.8 KB)

//////

this may be a nice thing to investigate ...

6 Likes

perfect! thank you!

one last question...I ve manage to play a spritesheet with this method and worked as expected. But I think is not the optimal solution when loading heavy animations. Any chance to implement this with an image sequence???

thank you

you'd have to custom script this as Hypes approach is to convert sequences to spritesheets ... no solution via the GUI possible ...

1 Like

For some reason the attached file when published, does not do produce the scroll animation in my browser. Chrome / Safari / Firefox.

Is it just my browser?

Also, curious to know what is the difference / Pros and Cons of using this approach vs. the approach below, which was found in another file on the forum:

var symbolInstance = hypeDocument.getSymbolInstanceById(element.id);
var timelineNameToControl = 'Menuscroll';
var duration = symbolInstance.durationForTimelineNamed(timelineNameToControl);
var step = duration/50;

if (window.addEventListener) {
window.addEventListener("mousewheel", getScrollDir, false);
//FF
window.addEventListener("DOMMouseScroll", getScrollDir, false);
}

function getScrollDir(e){


	var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
	console.log(delta, duration);	
	if(delta === -1){
		newTime = symbolInstance.currentTimeInTimelineNamed(timelineNameToControl) + step;
		symbolInstance.goToTimeInTimelineNamed(newTime, timelineNameToControl);
	
	} else {
		newTime = symbolInstance.currentTimeInTimelineNamed(timelineNameToControl) - step;
		symbolInstance.goToTimeInTimelineNamed(newTime, timelineNameToControl);
	}
	

}

does the provided link work┬┐

this approach listens for mousewheel and does not offer momentum ...or?

Yes -- the link works but the file does not.

Yes, that is what I was trying to understand. So, what tools can we use to change the momentum? Is this controlled by easing options? Anything else?

downloaded the file, previewed in chrome -> works

you may provide a link or some more information.

to mention: it's been a really not well tested experiment. so of course there may be some possible gaps ...

Hans, my main problems as I ve started a project based in your file, are two:

  1. The spritesheet for the animation takes too long to load
  2. The page isn't adjustable in terms of height (makes sense) as I cant scoll down to the bottom of the page (makes sense also). Scrollmagic example you provided Where I have to put prepared HTML, CSS and JS? has not this problem as it "freezes" it terms of height the position of the animation, but the rest of the page scrolls normally. Any change to have scrollmagic with scroll momentum???

This is what I see when I pubish the file:

Not sure why ....?

nothing happens :slight_smile:
did you make any changes┬┐
does the timeline exist┬┐
you've got a livelink┬┐
any error in the console┬┐

regarding greensock ...

in the head include both:
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

assuming a timeline with name test and trigger element with id start ...

	const frameCount = hypeDocument.durationForTimelineNamed('test')*30;


const test = {
  frame: 0
};



gsap.to(test, {
  frame: frameCount,
  snap: "frame",
  scrollTrigger: {
  trigger: '#start',
  start: "top top",
  end: "+=500",
  //pin: true,
    scrub: 1
  },
  onUpdate: render 
});


function render() {
hypeDocument.goToTimeInTimelineNamed(test.frame/30, 'test');
}
1 Like

Made no changes. Downloaded it the 3rd time, to be sure :slight_smile:
Timeline exists and JS is on Symbol Load

There is an error:

ah, ok ... you're working with an outdated runtime ...

hypeDocument.currentSceneId() does not exist in 654 ...

654 equals 4.0, so you should be able to update Hype ...

3 Likes

Got it. Beautiful work Hans. Thank you!