Search the Community

Hi there! I need some help from you guys. I'm trying to apply the effect in the codepen demo, I have two sections (that contains each one a carousel) and I want the second section cover the first section on scroll (same funcionality as the demo but only with these two sections). I'm writing the scroll trigger code in the first carousel component (don't know if this is the right approach), the problem is that when I try to use the "pin: true" property, my first carousel dissapears or moves to the bottom of my app. I don't have a codepen because I'm using React but I made a codesandbox example in this link: CodeSandbox Link Thank you so much!!

My goal is to create an effect where I reveal a section with horisontal scrolling sections. Though the horisontal scroll should not activate before the last cover has been scrolled away first. I have create a screen recording of the desired result here: The problem I am facing is that the horisontal scroll behaviour is initialised before it is visible, so one can never get to see the first slide.

I was asked yesterday about animating to/from backgroundSize: "cover" or "contain" with GSAP, so I figured I'd share the solution here in case it helps anyone else. The problem: GSAP interpolates between numbers, but how is it supposed to interpolate between something like "300px 250px" and "contain" (not a number)? So I whipped together a function that basically translates "contain" or "cover" into their px-based equivalents for that particular element at whatever size it is then. Once we've got it converted, it's easy to animate. //this function converts the backgroundSize of an element from "cover" or "contain" or "auto" into px-based dimensions. To set it immediately, pass true as the 2nd parameter. function getBGSize(element, setInPx) { var e = (typeof(element) === "string") ? document.querySelector(element) : element, cs = window.getComputedStyle(e), imageUrl = cs.backgroundImage, size = cs.backgroundSize, image, w, h, iw, ih, ew, eh, ratio; if (imageUrl && !/\d/g.test(size)) { image = new Image(); image.setAttribute("src", imageUrl.replace(/(^url\("|^url\('|^url\(|"\)$|'\)$|\)$)/gi, "")); //remove any url() wrapper. Note: some browsers include quotes, some don't. iw = image.naturalWidth; ih = image.naturalHeight; ratio = iw / ih; ew = e.offsetWidth; eh = e.offsetHeight; if (!iw || !ih) { console.log("getBGSize() failed; image hasn't loaded yet."); } if (size === "cover" || size === "contain") { if ((size === "cover") === (iw / ew > ih / eh)) { h = eh; w = eh * ratio; } else { w = ew; h = ew / ratio; } } else { //"auto" w = iw; h = ih; } size = Math.ceil(w) + "px " + Math.ceil(h) + "px"; if (setInPx) { e.style.backgroundSize = size; } } return size; } The only catch is that the image must be already loaded, otherwise it's impossible to figure out the native dimensions of the image (aspect ratio). While it's technically possible to add this functionality into CSSPlugin, it didn't seem advisable because it eats up a fair amount of kb and it's EXTREMELY uncommon for folks to want to animate to/from a background-size of cover or contain. So maybe 0.0001% of the audience would benefit but 100% would pay the kb price. Didn't seem worthwhile, so a helper function like this struck me as more appropriate. Feel free to chime in if you disagree. Happy tweening!

Hi! I've ran into this. < var div = document.createElement('div'); < TweenMax.set(div, {backgroundSize: 'cover'}); < console.log(div.style.backgroundSize); > "50% 0px" It's should be "cover", isn't it?