Hi again,
Firstly, just want to thank @elegantseagulls and @Trapti for pointing me in the right direction to get me started. Your help was greatly appreciated.
My site is 99% done, but I've got a glitch happening is iOS Safari that I'm having trouble solving. It happens at the very end of the timeline, so you would need to scroll to the end of the page to see it happen -- the issue: the timeline animation jumps at the end, probably due to iOS Safari's rubber-band effect, and the screen momentarily goes blank.
Here's a video of the issue that's happening here: https://www.dropbox.com/s/02wlgryopxzyxcx/RPReplay_Final1622519647.mp4?dl=0. You will need an iPad to see it happen locally . I've disabled the timeline & scroll trigger on smaller devices (ie. phones). Unfortunately, I'm unable to "inspect" for the issue because I don't have a USB-C to USB-C cable to connect the iPad to my Mac.
You can visit the site here: https://homepage4change.github.io/ (in Safari iOS on an iPad)
Here's the timeline registration block:
//$ and $$ -- Query selector shorthands
const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);
const app = $("#app"); // #app is the main container for the timeline
const slates = $$('.slate'); // first and last <section> elements
const cards = $$('.card'); // all the <section> dom elements between the slates
tl = gsap.timeline({
// Attach it to the scroll
scrollTrigger: {
trigger: app,
pin: true,
start: "top top",
end: () => `+=${app.offsetHeight * (cards.length/2 + slates.length/2)}`,
scrub: 0.3,
invalidateOnRefresh: true,
onRefresh: self => tl.progress(self.progress)
}
});
and here's the timeline setup:
// Animation duration
const d = 1;
//Move the first two cards into the center position
tl.fromTo('.card:nth-child(2)', {y:"100%"},{y:0,duration: d, ease: 'linear'});
tl.fromTo('.card:nth-child(2) .container', {y:"-100%"},{y:0,duration: d, ease: 'linear'},"-="+d);
tl.fromTo('.card:nth-child(2) .nav-element',{y:-1*innerHeight},{y:0,duration: d, ease: 'linear'},"-="+d);
tl.fromTo('.card:nth-child(3)', {y:"-100%"}, {y:0,duration: d, ease: 'linear'},"-="+d);
tl.fromTo('.card:nth-child(3) .container', {y:"100%"}, {y:0,duration: d, ease: 'linear'}, "-="+d);
tl.fromTo('.card:nth-child(3) .nav-element',{y:innerHeight},{y:0,duration: d, ease: 'linear'},"-="+d);
//Hide the hero
tl.to('#hero', {y:"100%",duration: 0, ease: 'linear'});
//Animate all the cards
for(let i = 1; i < cards.length-2; i+=2) {
//target //from //to //duration //delay
tl.fromTo('.card:nth-child('+(i+1)+')', {y:0}, {y:"-100%",duration: d, ease: 'linear'});
tl.fromTo('.card:nth-child('+(i+1)+') .container', {y:0}, {y:"100%",duration: d, ease: 'linear'},"-="+d);
if($('.card:nth-child('+(i+1)+') .nav-element')) {
tl.fromTo('.card:nth-child('+(i+1)+') .nav-element', {y:0},{y:innerHeight,duration: d, ease: 'linear'},"-="+d);
}
tl.fromTo('.card:nth-child('+(i+3)+')', {y:"100%"}, {y:0, duration: d, ease: 'linear'}, "-="+d);
tl.fromTo('.card:nth-child('+(i+3)+') .container', {y:"-100%"}, {y:0, duration: d, ease: 'linear'},"-="+d);
if($('.card:nth-child('+(i+3)+') .nav-element')) {
tl.fromTo('.card:nth-child('+(i+3)+') .nav-element', {y:-1*innerHeight},{y:0, duration: d, ease: 'linear'},"-="+d);
}
tl.fromTo('.card:nth-child('+(i+2)+')', {y:0}, {y:"100%",duration: d, ease: 'linear'},"-="+d);
tl.fromTo('.card:nth-child('+(i+2)+') .container', {y:0}, {y:"-100%",duration: d, ease: 'linear'}, "-="+d);
if($('.card:nth-child('+(i+2)+') .nav-element')) {
tl.fromTo('.card:nth-child('+(i+2)+') .nav-element', {y:0},{y:-1*innerHeight,duration: d, ease: 'linear'},"-="+d);
}
tl.fromTo('.card:nth-child('+(i+4)+')', {y:"-100%"}, {y:0, duration: d, ease: 'linear'},"-="+d);
tl.fromTo('.card:nth-child('+(i+4)+') .container', {y:"100%"}, {y:0, duration: d, ease: 'linear'},"-="+d);
if($('.card:nth-child('+(i+4)+') .nav-element')) {
tl.fromTo('.card:nth-child('+(i+4)+') .nav-element', {y:innerHeight}, {y:0, duration: d, ease: 'linear'},"-="+d);
}
}
//Move the last two cards off stage to reveal the final section
tl.fromTo('.card:nth-child('+(cards.length)+')', {y:0},{y:"-100%",duration: d, ease: 'linear'});
tl.fromTo('.card:nth-child('+(cards.length)+') .container', {y:0},{ y:"100%", duration: d, ease: 'linear'},"-="+d);
if($('.card:nth-child('+(cards.length)+') .nav-element')) {
tl.fromTo('.card:nth-child('+(cards.length)+') .nav-element', {y:0}, {y:innerHeight,duration: d, ease: 'linear'},"-="+d);
}
tl.fromTo('.card:nth-child('+(cards.length+1)+')', {y:0}, {y:"100%",duration: d, ease: 'linear'},"-="+d);
tl.fromTo('.card:nth-child('+(cards.length+1)+') .container', {y:0}, {y:"-100%",duration: d, ease: 'linear'}, "-="+d);
if($('.card:nth-child('+(cards.length+1)+') .nav-element')) {
tl.fromTo('.card:nth-child('+(cards.length+1)+') .nav-element', {y:0}, {y:-1*innerHeight, duration: d, ease: 'linear'},"-="+d);
}
tl.totalProgress(progress || 0);
Thanks again for any help you can provide!
Pramesh