Hi, I'm looking to recreate these sort-of quick swift transitions between the different sections on this page seen here, with Scrolltrigger. I really like how the animations on this site are pretty much instant, so it doesn't look like there's any scrub.
In my case I've got an SVG map that has a fixed position for which I was to use these transitions on, so for example as the user scrolls down, the colours could maybe change and vice-versa. I was originally thinking of just creating multiple different sections in my HTML, and just using each of these sections as triggers in multiple Scrolltriggers. The .sectionWrapper has a position: absolute so it pretty much takes up the entire page.
<div class="sectionWrapper">
<div class="section one"></div>
<div class="section two"></div>
<div class="section three"></div>
<div class="section four"></div>
</div>
I wasn't sure about how well this would work so I tried something else out, nested timelines:
// Timeline with scroll
let master = gsap.timeline({
scrollTrigger: {
trigger: '.sectionWrapper',
start: 'top top',
end: 'bottom bottom',
toggleActions: "play none none reverse",
markers: true
}
});
// First section
let greenTL = gsap.timeline();
var rule = CSSRulePlugin.getRule(".bar:after");
greenTL.to('polygon', {
fill: (i, el) => greenMapCol(el.getAttribute('data-canopy'))
}).to('.innerCircle', {
background: 'linear-gradient(317deg, rgba(3, 179, 218, 1) 0%, rgba(3, 218, 154, 1) 49%, rgba(1, 242, 207, 1) 100%)'
}).to(rule, {
background: 'linear-gradient(317deg, rgba(3, 179, 218, 1) 0%, rgba(3, 218, 154, 1) 49%, rgba(1, 242, 207, 1) 100%)'
});
// Second section
let heatTL = gsap.timeline();
heatTL.to('polygon', {
onEnter: () => currentCol = heatMapCol,
fill: (i, el) => heatMapCol(el.getAttribute('data-canopy'))
}).to('.innerCircle', {
background: 'linear-gradient(317deg, rgb(249, 248, 244) 0%, rgb(255, 223, 123) 25%, rgb(255, 193, 82) 50%, rgb(252, 147, 61) 75%, rgb(255, 104, 51) 100%)',
}).to(rule, {
background: 'linear-gradient(317deg, rgb(249, 248, 244) 0%, rgb(255, 223, 123) 25%, rgb(255, 193, 82) 50%, rgb(252, 147, 61) 75%, rgb(255, 104, 51) 100%)',
});
// Adding the timelines together
master.add(greenTL);
master.add(heatTL);
I'm stuck on whether or not a timeline could possibly be useful for this purpose, and just hooking up one Scrolltrigger to the timeline with scrub: true? And in that timeline, maybe have nested timelines with each representing one section? Would this work? What would be the best way to go about this? I just really like how segmented everything was in that page I referenced. Cheers!