Embedding ScrollTrigger plugin

dizzysoundstudio · October 13, 2020, 10:49am

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

h_classen · October 13, 2020, 12:16pm

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

dizzysoundstudio · October 13, 2020, 12:38pm

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

h_classen · October 13, 2020, 9:49pm

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 ...

dizzysoundstudio · October 14, 2020, 6:52am

perfect! thank you!

dizzysoundstudio · October 14, 2020, 9:21am

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

h_classen · October 14, 2020, 10:35am

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

HyperFocus · October 16, 2020, 4:05pm

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);
	}
	

}

h_classen · October 16, 2020, 4:31pm

does the provided link work¿

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

HyperFocus · October 16, 2020, 7:00pm

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?

h_classen · October 16, 2020, 8:29pm

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 ...

dizzysoundstudio · October 17, 2020, 9:36am

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

The spritesheet for the animation takes too long to load
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???

HyperFocus · October 17, 2020, 9:32pm

This is what I see when I pubish the file:

Not sure why ....?

scroll recording

h_classen · October 18, 2020, 8:52am

nothing happens
did you make any changes¿
does the timeline exist¿
you've got a livelink¿
any error in the console¿

h_classen · October 18, 2020, 6:00pm

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');
}

HyperFocus · October 19, 2020, 4:15pm

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

There is an error:

h_classen · October 19, 2020, 4:52pm

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 ...

HyperFocus · October 20, 2020, 2:37am

Got it. Beautiful work Hans. Thank you!