joshahayes

Thank you so much, this really clears it up for me. Here's what I've done so far, would this be the best way to go? I'm using a counter to keep track of what section I'm in at each point, and in each section function I've just got the gsap animations going. // Counter that tells which section the user is currently in let sectionCounter = 1; window.addEventListener('wheel', (e) => { if (!menuOpen) { // This can be ignored if (e.deltaY < 0) { if (sectionCounter == 1) { return; } else if (sectionCounter == 2) { section1(); sectionCounter = 1; } else if (sectionCounter == 3) { section2(); sectionCounter = 2; } else if (sectionCounter == 4) { section3(); sectionCounter = 3; } } if (e.deltaY > 0) { if (sectionCounter == 4) { return; } else if (sectionCounter == 3) { section4(); sectionCounter = 4; } else if (sectionCounter == 2) { section3(); sectionCounter = 3; } else if (sectionCounter == 1) { section2(); sectionCounter = 2; } } } })

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!

Hey @OSUblake I've created a polygon object and I've included the constructor and update() function. I've noticed though that looping through all the polygon objects in the ticker function seems to be causing a lot of lag. For instance, console.log tells me that there are 2514 polygons within the polys array which seems like a lot to loop through every second. I haven't included anything else in the update() function of each object, just a console.log so I'm not sure if that array might be too much to loop through. Here's what my code looks like: class Polygon { constructor(element) { this.element = element; this.getProp = gsap.getProperty(element); gsap.set(element, { transformOrigin: "50% 50%" }); } update() { console.log("hello"); } } const mousePos = { x: window.innerWidth / 2, y: window.innerHeight / 2 }; const polys = gsap.utils.toArray("polygon").map(el => new Polygon(el)); gsap.ticker.add(() => { for (let i = 0; i < polys.length; i++) { polys[i].update(); } }) I've included an image of the SVG map that I'm using. Is my file just too large to use in this case?

Cheers guys! This is all really helpful, will give the above methods a shot

Hey again, sorry for what is most likely another rookie-mistake question but I've got this SVG map made up out of hexagons and I am trying to implement a hover interaction wherein as the mouse moves over the map, the hexagons underneath change in scale depending on the distance between it and the mouse. I created this function here which goes through the array of SVG polygons, and on hover, checks the distance between it and the mouse and if below a certain number, maps that polygon's distance to a new number between 0.2 and 1.2 which I then just use on a css transform property for the scale. This codepen probably better demonstrates this: function hexagonHover() { for (i = 0; i < poly.length; i++) { poly[i].addEventListener('mouseover', function (event) { for (i = 0; i < poly.length; i++) { if (polyDist[i] <= 60) { let v = mapRange(polyDist[i], 0, 60, 1.2, 0.2); poly[i].style.transform = "scale(" + v + ")"; poly[i].style.transformOrigin = "center"; poly[i].style.transformBox = "fill-box"; poly[i].style.transition = "transform ease .6s"; } else { poly[i].style.transform = "scale(1.0)"; } } }); } } It works nicely for that example, but in my actual design the map is a lot larger and there are quite a few polygons to go through. It lags a lot, especially on lower-end systems so I'm pretty much trying to find a more optimal way of animating this interaction. I have a feeling most of the reduced-performance is caused by changing the css variables of each polygon in every second through this script so I tried using gsap for this. Here is the GSAP version which still works, but for some reason has even worst performance than before. function polygonHover() { map.addEventListener('mouseover', function () { for (i = 0; i < poly.length; i++) { if (polyDist[i] < 60) { let v = mapRange(polyDist[i], 0, 60, 1.2, 0.2); gsap.to(poly[i], { duration: .5, ease: "power2.inOut", transformOrigin: "50% 50%", scale: v }); } else { gsap.to(poly[i], { scale: 1.0 }); } } }); } I'm not sure what to do anymore.

thanks Blake! That worked perfectly

Hi, I've got an SVG map made out of hexagons / polygons and in each polygon, there is a data-attribute which I use to give each polygon's it's corresponding colour using the D3 Colour Scales method. for (i = 0; i < poly.length; i++) { var data = parseInt(poly[i].getAttribute('data-canopy')); poly[i].style.fill = grayscaleCol(data); } So it goes through an array of all the polygons, gets the data attribute which is called 'canopy' and then provides a fill based on the data using the colour scale 'grayscaleCol'. This is what the colour scale looks like: var grayscaleCol = d3.scaleLinear().domain([5, 10, 15, 25, 50, 75]).range(['#727272', '#686868', '#515151', '#3A3A3A', '#252525', '#131313']); I'm still very much a newb when it comes to GSAP but would it be possible to have our gsap target be an array of elements and then animate the fill of each element using the 'canopy' data attribute (which is a number and is different for each polygon) and the colour scale? Could I use 'this.getAttribute' within gsap or anything similar? Cheers!

https://www.gsj.be/en#advocaten Can the scrolling behaviour here be replicated with GSAP's ScrollTrigger? I notice there's no scrollbar so I wasn't too sure. There seems to be some momentum to the scrolling, like just scrolling a little bit triggers a transition to the next scene? Would this be possible with GSAP? And if so, would there be a way to hide the scrollbar whilst still keeping the overflow-y not hidden? Cheers.