popland

Thank you! will look into it, i think i will follow your last advice not much in favour of 'overflow-hidden" solution, was hoping not to have a the scrollbar in a native way, but in any case i will try it too,

can you try this one? im able to open it with an incognito window https://codesandbox.io/p/github/popeating/next.popland.it/draft/dank-sunset?file=/pages/index.js:1,1

I'm trying to make a "pinned" section structure (as for the example in documentation), it works pretty good, unless i add something inside a section and i animate it with another scrolltrigger. First section is correct, also the scrolltrigger animation of its content, but when i reach the second section a "blank" with the size of the page itslelf appear on the left. If i remove the scrolltrigger animation inside everything is working correctly at this url you can see an example: https://codesandbox.io/p/github/popeating/next.popland.it/draft/dank-sunset as you can see the "hello" text is growing as you scroll, but when the second section take over, the horizontal bar appear gsap.to(".txt", { scrollTrigger: { trigger: ".txt", scrub: true, start: "middle top", markers: true, pin: true, pinSpacing: false, }, scale: 6, duration: 1, }); if i comment or remove the code above and it works again (i also tried to modify it with various pin combination with no luck) i guess there is something about having a scrolltrigger inside a pinned scrolltrigger that i cant figure out any suggestion?

hello @Cassie i know this is not a GSAP issue, but since i'm animating the svg with gsap, maybe someone already faced the issue this is codepen demo i made: https://codepen.io/lenna-the-vuer/pen/GRyvBEa in chrome it works as expected, in firefox not really, and im really scared to watch it in safari in firefox transform-origin is supported but "Keywords and percentages refer to the canvas instead of the object itself", so i think i cant achieve a total compatibility in animation

In a page i am animating an SVG logo that work as a mask to reveal the content of the page the animation is pretty basic: i center the svg logo on the page, make it bigger and then even more bigger until the page is totally in view: gsap.set('#yes', { transformOrigin: 'center', scale: 1, x: window.innerWidth / 2, y: window.innerHeight / 2, }); gsap.to('#yes', { transformOrigin: 'center', scale: 15, duration: 1, ease: 'power4.easeInOut', }); gsap.to('#yes', { scale: 350, transformOrigin: 'right', duration: 0.7, delay: 1, }); but it looks like firefox and chrome interpret the transform orgin differently (and safari too) you can have a look here with both browser: https://paca.popland.it of course the chrome version is the correct one any way (besides making the animation browser dependant which i found hard to mantain) to make it work the same way? or at least in a way that firefox works a little better thank you

Thank you @GreenSock in fact bottom-left stayed there as an experiment (i was looking for center) using your suggestion it works almost perfectly (the problem now is the SVG that no matter how big it is, it keeps a "white" part in the middle :D) Anyway what was interesting is the concept, i will deal with SVG shape later or (but i dont think its possible) i will fade away the clipPath once big enough At the moment i'm quiete satisfied with the animation i came up, i will try to implement on the live site too https://codepen.io/lenna-the-vuer/pen/GRyvBEa

Just for update i am able to position and scale the svg, but it looks like it is ignoring the transform-origin https://codepen.io/lenna-the-vuer/pen/GRyvBEa

With a bit of trial and error and some workaround (setting the position in css and then again in gsap) i got almost done https://codepen.io/lenna-the-vuer/pen/GRyvBEa

Thank you! my goal is a bit more complex, on the first page load i need the page to be revealed by the growing logo, the page page is actually a slider... at the moment the page is revelaed by a simple clip-path in two steps, (you can see an example here: https://paca.popland.it) with a basic timeline like this (when you get back to home the effect is not repeated): const tl = gsap.timeline(); tl.to('.homeSlider', { 'clip-path': 'polygon(0% 0%, 100% 0%, 100% 0%, 0% 100%)', duration: 0.8, ease: 'power4.easeInOut', }).to( '.homeSlider', { 'clip-path': 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)', duration: 0.6, ease: 'power4.easeInOut', }, '-=.3' ); its not bad, but since i have the logo in SVG format a zooming logo reveal would be nice

Hello all, i am trying to animate an SVG clipPath (to reveal an underlying image) in the pen you can see how i placed the the SVG over the image, but it looks the "#yes" id (the clipPath) can't be easily animated (i did not attached a gsap animation yet, but manuallly updating the css does not get the wished result); i would like to scale the SVG from the center of the image, from 0 to big enought to show the whole image i read all the posts about the SVG, but no luck yet

@Cassie thank you, that's a good solution, probably the only one (even if i dont like spread operators in my code... they look so unclean!) already tried in my project and it works perfectly thanks again!

Thank you @mikel of course adding more option is always fun (and i really like the menu -> close text animation) the solution you posted its very similar to mine, where you have a random label (i got a random number) and play the random labelled function and its ok for most of the part, especially if the animation are really very different. anyway if you want to add a menuToBottom (for example), you have to make a new timeline for it even if the differences are minimal (in my case, one is with a y animation and one is with a x animation) so, having the animation itself as random return can be useful (for example i can have 'x:100' but also 'opacity:0' to switch from) i hope my explanation make sense, i know it is a bit confused in my mind a thing like var val="x:-100%" tl.to('#selector',{val, duration:1}) where val can be any animation value (x:-100%, opacity:0, y:100% and so on) gotten from a random, would be great

i made a pen sample here: https://codepen.io/lenna-the-vuer/pen/popJbYO its just the basic, as you can see, when you click the close, the overlay disappear on top or on left, based on a random number and an if statement, this is working but not so flexible, since if i need to add more options i need to make more numbers, increase the ifs, increase the tl.to animations... so i wish i could use the GSAP random utils, to set the animations itself ("x:'100%", "y:'-100%", and more as needed) and passing the return value from the random to the tl.to itself

Thank you @Cassie, this will randomize the y (so it disappear moving to top or moving to bottom) my goal i sto have it disappear to the left or to the top (disappearing to top tl.to('#fullmenu', {y:'-100%', duration:0.2})and disappearing to the left tl.to('#fullmenu', {x:'100%', duration:0.2})), at the moment i am obtaining it by having two functions (one for each animation) and when i click the closing button i execute one of them at random. This is ok at the moment, but if i want to add a new closing animation i have to write a new function and so on, so i was thinking, can the "animation values" part of gsap (x:'100%' or even opacity:1) passed as a variable?

I got a (basic) screen overlay that on some clicks come from the left and cover the full page, it uses something like var tl = gsap.timeline(); tl.to('#fullmenu', { x: 0, duration: 0.2 }); Then i have a its closer, that basically move the overaly to the top out of the screen and reset it on the full left var tl = gsap.timeline(); tl.to('#fullmenu', { y: '-100%', duration: 0.2 }); tl.set('#fullmenu', { y: '0', x: '100%' }); I would like to have the closer animation to be a bit more "random", so that when it closes it could disappear moving to the top or the left, my first idea wast to make 2 closer function and randomize its usage (for example closeToTop() and closeToLeft()). But i was thinking if this could be the case to use the random GSAP function, so that the animation of the closer tl.to('#fullmenu', { y: '-100%', duration: 0.2 }); could get a random to (y:'-100%' or x:'-100%' or even more if needed), can it be done? for example i tried with an array like const anim=gsap.utils.random(["y:'-100%'", x:'100%']); and then use it like: tl.to('#fullmenu',{anim, duration:0.2} but it is not working, giving me the following error: Invalid property anim set to x:'-100%' Missing plugin? or Invalid property anim set to y:'-100%' Missing plugin? any suggestion?

thank you i tried chaining tweens on a timeline, but i wasnt thinking like in your example (that approximate really well what i was tinking), my approach was animating bottom corners in a tween and top ones in the other, but i realized that every clip path amimation should have all four corners. So, i guess your solution could be thr best i can do, even if it is tied to position instead than time thank you

I have a basic image reveal with clip path, but it's quiete boring, the clip path is a square (4 points) that starts "compressed" in the middle and it animates the corners torward the edge of the container/image (if you see the demo, you probably better understand than my explanation) as i said the animation is quiete basic, so i was thinking to improve (at least for my taste) having the bottom points starting its animation a little earlier and the top ones to catch up later but it looks i can't decouple top and bottom corners in clip-path, at least i can't find a solution! any idea?

Thank you @ZachSaucier just transformed it in a standalone function getting most parameters it needs paramters like: slider(target='.target'....)

is it possible to reuse the code for multiple sliders in the same page? which is the most convenient and savy way to do it? for the moment i duplicated the timer, the proxy, the animation and the draggable, keeping the rest of functions intact any suggestion on how to optimize?

my bug looks like here: https://codepen.io/lenna-the-vuer/pen/RwoVBgW if you resize while the animatio is going (start the resize and leave the resize before the animation ends), the alignement break up if, while resizing you wait the end of animation before leaving the resize handle, the slider revert to the first image and line up correctly, but you should "leave" the resizing before it restart so that's why i was thingking to suspend the animation while resizing and resuming it at the end

it looks that somethimes it works and sometimes it doesnt (so it does not work) i move also gsap.set(imgObj, { x: function (i) { return i * boxWidth; }, }); inside the recalc function, and seems to work, but it is not your example still got my problem, when resizing white bars appears and images overlap

Thank you, i used a timeline in an attempt to kill and restart the animation its still not working properly while resizing (guess its the pwrap), but ill try to sort it out https://codepen.io/lenna-the-vuer/pen/RwoVBgW Working version

Thank you for your reply, i did it (i also added the pwrapWidth in the recalc), but still ignoring it

I got the following slider that is working quiete correctly (still need to bind the next/prev button but that is not my concern) the images slides by the size of the container box and get wrapped so that the loop is infinite the size of container box is calculated at startup with let boxWidth = gsap.getProperty(container, 'width'); and i need to recalculate it when the window is resized, i attached a listener to the resize and with the function i can recalculate the new box width function recalc() { console.log(gsap.getProperty(container, 'width')); boxWidth = gsap.getProperty(container, 'width'); } but it looks the newly calculated width is ignored by my animation function that is already running via a delayedcall how can i reset the animation and have it restarted correctly with the new width?

hello @ZachSaucier i just can not find a way to know which "index" of my array of slides is currently the one showing, so i can (i think while im in the "updateProgress" function) animate the corresponding index of the array of thicks (the red thicks over the prev/next button)