Jump to content
Search Community

popland

Members
  • Posts

    47
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

popland's Achievements

  1. 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,
  2. 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
  3. 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?
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. popland

    Random animations

    @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!
  12. popland

    Random animations

    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
  13. popland

    Random animations

    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
  14. popland

    Random animations

    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?
  15. popland

    Random animations

    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?
×
×
  • Create New...