Hey @OSUblake @GreenSock@Cassie,
First of all I'm really sorry that I've made some quick assumptions before tracking down the real issue. After quite some back and forth; and restructuring the timelines, I noticed that the issue appears but only sometimes.
As you can see in the screen recording(https://vimeo.com/709507484), when I keep refreshing the page a few times, the pinned section's start point sometimes starts at the start of the previous container or sometimes where it is expected to. As previously mentioned, if the start point is shifted and I switch to fullscreen, the "start" point magically snaps back to where it is supposed to be. When I switch back to normal window, the start point doesn't snap back to top but stays where it is expected to be.
Assuming that the previous container's styling might be conflicting, I tried removing the previous section, but it does the same thing again but now with the very first section.i.e, the carousel. So maybe it's the way I'm creating the timeline?
At this point, I'm quite clueless as I've tried almost everything I can but haven't been able to figure out why this is happening. It'd be really great if someone could help me get to the bottom of this.
Again, as I'm not able to reproduce this issue on codepen, I'm attaching a minimal demo of how I'm structuring the timelines as well the updated live project(https://delivious.000webhostapp.com/safety-tech.php). https://codepen.io/delivious/pen/LYQRwLP?editors=0010
Below is the full ScrollTrigger timeline logic:
(function() {
'use strict';
const ease_in = "circ.in";
const ease_out = "circ.out";
const ease_in_out = "circ.inOut";
const expo_in = "expo.in";
const expo_out = "expo.out";
const expo_in_out = "expo.inOut";
let boxer_tl,
mobile,
ww;
let _a = {
init: () => {
_a.initVars();
_a.initTimelines();
_a.createTimeline();
_a.attachEvents();
},
initVars: () => {
ww = window.innerWidth;
mobile = ww < 768;
},
initTimelines: () => {
gsap.registerPlugin("ScrollTrigger");
boxer_tl = gsap.timeline({
defaults: {
duration: 0.67,
ease: ease_out
},
scrollTrigger: {
trigger: ".boxerSection",
start: "top top",
end: "+=15000",
markers: true,
pin: true,
scrub: 0.5
}
});
},
createTimeline: () => {
boxer_tl.set("#boxer_svg, #subaru_boxer_engine, #subaru_boxer_engine_inner, .prop, #car_2_engine_1, #car_2_engine_2", {opacity: 0, autoAlpha: 0})
.set("#boxer_title, .prop-conclude, .fullTitle, #prop_22, #prop_23, #prop_24, #prop_25, #prop_27, #prop_28, #prop_29, #prop_30, #prop_31, #prop_32", {yPercent: 100, opacity: 0, autoAlpha: 0})
.set("#subaru_car", {scale: 0, opacity: 0, autoAlpha: 0, transformOrigin: "center center"})
.set("#prop_1, #prop_2", {xPercent: mobile ? -20 : -50})
.set("#prop_3", {scale: 0, xPercent: mobile ? -300 : 100, yPercent: mobile ? 0 : -50, transformOrigin: "center center"})
.set("#car_2", {scale: 0, transformOrigin: "center center"})
.set("#prop_10", {yPercent: mobile ? 500 : 100})
.set("#prop_20", {yPercent: 0, opacity: 1, autoAlpha: 1});
boxer_tl.add("boxer_intro", mobile ? 0.1 : 0.2)
.to("#boxer_title", {yPercent: -50, opacity: 1, autoAlpha: 1}, "boxer_intro")
.fromTo("#boxer_title", {yPercent: -50, opacity: 1, autoAlpha: 1, ease: expo_in}, {yPercent: -100, opacity: 0, autoAlpha: 0, ease: ease_in}, "boxer_intro+=0.5")
.add("figure_in")
.to("#boxer_svg", {opacity: 1, autoAlpha: 1}, "figure_in")
.to("#subaru_car", {scale: 1, opacity: 1, autoAlpha: 1, transformOrigin: "center center"}, "-=0.5")
.add("boxer_engine")
.to("#subaru_boxer_engine", {opacity: 1, autoAlpha: 1}, "boxer_engine")
// you've got a smooth operator
.to("#prop_1", {opacity: 1, autoAlpha: 1, xPercent: 0}, "-=0.25")
.to("#prop_2", {opacity: 1, autoAlpha: 1, xPercent: 0}, "-=0.25")
.fromTo("#prop_2", {opacity: 1, autoAlpha: 1, xPercent: 0, ease: ease_in}, {opacity: 0, autoAlpha: 0, xPercent: mobile ? 150 : -150}, "+=0.5")
.fromTo("#prop_1", {opacity: 1, autoAlpha: 1, xPercent: 0, ease: ease_in}, {opacity: 0, autoAlpha: 0, xPercent: mobile ? 150 : -150}, "-=0.25")
.to("#prop_3", {scale: 1, opacity: 1, autoAlpha: 1, xPercent: 0, yPercent: mobile ? 0 : -50}, "-=0.75")
// boxer engine
.to("#subaru_boxer_engine_inner", {opacity: 1, autoAlpha: 1})
.to("#prop_4", {opacity: 1, autoAlpha: 1}, "-=0.67")
.to("#prop_5", {opacity: 1, autoAlpha: 1}, "-=0.25")
.fromTo("#prop_5", {opacity: 1, autoAlpha: 1, ease: ease_in}, {opacity: 0, autoAlpha: 0}, "+=0.5")
.fromTo("#prop_4", {opacity: 1, autoAlpha: 1, ease: ease_in}, {opacity: 0, autoAlpha: 0}, "-=0.25")
.fromTo("#subaru_car", {scale: 1, opacity: 1, autoAlpha: 1, transformOrigin: "center center", ease: ease_in}, {scale: 0, opacity: 0, autoAlpha: 0, transformOrigin: "center center"}, "-=0.67")
// inline engine
.add("inline_engine", "-=0.67")
.to("#car_2", {scale: 1, opacity: 1, autoAlpha: 1, transformOrigin: "center center"})
.to("#car_2_engine_1", {opacity: 1, autoAlpha: 1})
.to("#prop_6", {opacity: 1, autoAlpha: 1}, "-=0.67")
.to("#prop_7", {opacity: 1, autoAlpha: 1}, "-=0.25")
.fromTo("#prop_7", {opacity: 1, autoAlpha: 1, ease: ease_in}, {opacity: 0, autoAlpha: 0}, "+=0.5")
.fromTo("#prop_6", {opacity: 1, autoAlpha: 1, ease: ease_in}, {opacity: 0, autoAlpha: 0}, "-=0.25")
.fromTo("#car_2_engine_1", {opacity: 1, autoAlpha: 1, ease: ease_in}, {opacity: 0, autoAlpha: 0})
// v type engine
.add("v_type_engine")
.to("#car_2_engine_2", {opacity: 1, autoAlpha: 1})
.to("#prop_8", {opacity: 1, autoAlpha: 1}, "-=0.67")
.to("#prop_9", {opacity: 1, autoAlpha: 1}, "-=0.25")
.fromTo("#prop_9", {opacity: 1, autoAlpha: 1, ease: ease_in}, {opacity: 0, autoAlpha: 0, xPercent: mobile ? 0 : 100, yPercent: mobile ? -400 : 0}, mobile ? "+=0.5" : "+=0.5")
.fromTo("#prop_8", {opacity: 1, autoAlpha: 1, ease: ease_in}, {opacity: 0, autoAlpha: 0, xPercent: mobile ? 0 : 100, yPercent: mobile ? -1500 : 0}, mobile ? "-=0.67" : "-=0.5")
// clear the scene for next phase
.add("clear_engine_scene")
.fromTo("#prop_3", {opacity: 1, autoAlpha: 1, xPercent: 0, yPercent: mobile ? 0 : -50, ease: expo_in}, {opacity: 0, autoAlpha: 0, xPercent: mobile ? 0 : -100, yPercent: mobile ? -250 : -50}, mobile ? "-=0.84" : "-=0.84")
.fromTo("#boxer_svg", {yPercent: 0, opacity: 1, autoAlpha: 1, ease: expo_in}, {yPercent: -100, opacity: 0, autoAlpha: 0}, "-=0.5")
// conclude
.add("conclude", "-=0.67")
.to("#prop_10", {opacity: 1, autoAlpha: 1, yPercent: 0}, "-=0.25")
.to("#prop_11", {opacity: 1, autoAlpha: 1, yPercent: 0}, "-=0.25")
.to("#prop_12", {opacity: 1, autoAlpha: 1, yPercent: 0}, "-=0.25")
.to("#prop_13", {opacity: 1, autoAlpha: 1, yPercent: 0}, "-=0.25")
.to("#prop_14", {opacity: 1, autoAlpha: 1, yPercent: 0}, "-=0.25")
.to("#prop_15", {opacity: 1, autoAlpha: 1, yPercent: 0}, "-=0.25")
.to("#prop_16", {opacity: 1, autoAlpha: 1, yPercent: 0}, "-=0.25")
.to("#prop_17", {opacity: 1, autoAlpha: 1, yPercent: 0}, "-=0.25")
.to("#prop_18", {opacity: 1, autoAlpha: 1, yPercent: 0}, "-=0.25")
// clear conclude
.add("clear_conclude")
.to("#prop_20", {yPercent: -100, opacity: 0, autoAlpha: 0, ease: expo_in})
// lineartronic cvt
.add("lineartronic_cvt")
.to("#prop_19", {yPercent: -50, opacity: 1, autoAlpha: 1}, "lineartronic_cvt")
.to("#prop_19", {yPercent: -100, opacity: 0, autoAlpha: 0, ease: ease_in}, "lineartronic_cvt+=1")
.to("#prop_21", {yPercent: -50, opacity: 1, autoAlpha: 1})
.to("#prop_21", {yPercent: -100, opacity: 0, autoAlpha: 0, ease: ease_in}, "+=1")
// lineartronic bg image
.to("#prop_22", {yPercent: 0, opacity: 1, autoAlpha: 1}, "lineartronic_img")
.to("#prop_23", {opacity: 1, autoAlpha: 1, yPercent: 0}, "-=0.5")
.to("#prop_24", {opacity: 1, autoAlpha: 1, yPercent: 0}, "-=0.25")
.fromTo("#prop_23", {opacity: 1, autoAlpha: 1, yPercent: 0, ease: ease_in}, {opacity: 0, autoAlpha: 0, yPercent: -100}, "+=0.5")
.fromTo("#prop_24", {opacity: 1, autoAlpha: 1, yPercent: 0, ease: ease_in}, {opacity: 0, autoAlpha: 0, yPercent: -100}, "-=0.25")
.fromTo("#prop_22", {yPercent: 0, opacity: 1, autoAlpha: 1, ease: ease_in}, { yPercent: -50, opacity: 0, autoAlpha: 0}, "-=0.67")
// SI-Drive
.add("si_drive")
// steering_wheel
.to("#prop_25", {yPercent: mobile ? -50 : 0, opacity: 1, autoAlpha: 1, ease: expo_out})
.fromTo("#prop_25", {scale: 1, xPercent: "-=0", yPercent: mobile ? -50 : 0, ease: expo_in_out}, {scale: mobile ? 0.7 : 3, xPercent: mobile ? "-=0" : "-=60", yPercent: mobile ? -73 : -33})
.to(mobile ? "#prop_28" : "#prop_27", {yPercent: 0, opacity: 1, autoAlpha: 1})
.to(mobile ? "#prop_27" : "#prop_28", {yPercent: 0, opacity: 1, autoAlpha: 1}, "-=0.25")
.fromTo(mobile ? "#prop_28" : "#prop_27", {yPercent: 0, opacity: 1, autoAlpha: 1, ease: ease_in}, {yPercent: -100, opacity: 0, autoAlpha: 0}, "+=0.5")
.fromTo(mobile ? "#prop_27" : "#prop_28", {yPercent: 0, opacity: 1, autoAlpha: 1, ease: ease_in}, {yPercent: -100, opacity: 0, autoAlpha: 0}, "-=0.25")
.to("#prop_33", {fill: '#DA9320'})
.to(mobile ? "#prop_30" : "#prop_29", {yPercent: 0, opacity: 1, autoAlpha: 1}, "-=0.67")
.to(mobile ? "#prop_29" : "#prop_30", {yPercent: 0, opacity: 1, autoAlpha: 1}, "-=0.25")
.fromTo(mobile ? "#prop_30" : "#prop_29", {yPercent: 0, opacity: 1, autoAlpha: 1, ease: ease_in}, {yPercent: -100, opacity: 0, autoAlpha: 0}, "+=0.5")
.fromTo(mobile ? "#prop_29" : "#prop_30", {yPercent: 0, opacity: 1, autoAlpha: 1, ease: ease_in}, {yPercent: -100, opacity: 0, autoAlpha: 0}, "-=0.25")
.to(mobile ? "#prop_32" : "#prop_31", {yPercent: 0, opacity: 1, autoAlpha: 1})
.to(mobile ? "#prop_31" : "#prop_32", {yPercent: 0, opacity: 1, autoAlpha: 1}, "-=0.25")
.fromTo(mobile ? "#prop_32" : "#prop_31", {yPercent: 0, opacity: 1, autoAlpha: 1, ease: ease_in}, {yPercent: -100, opacity: 0, autoAlpha: 0}, "+=0.5")
.fromTo(mobile ? "#prop_31" : "#prop_32", {yPercent: 0, opacity: 1, autoAlpha: 1, ease: ease_in}, {yPercent: -100, opacity: 0, autoAlpha: 0}, "-=0.1")
.fromTo("#prop_25", {yPercent: mobile ? -73 : -33, ease: expo_in}, {yPercent: -183, opacity: 0, autoAlpha: 0}, "-=0.67");
},
attachEvents: () => {
window.addEventListener('resize', _a.handleResize, false);
},
handleResize: () => {
ScrollTrigger.refresh();
}
};
window.addEventListener('load', _a.init, false);
})();