Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

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

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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!
  9. 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
  10. 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
  11. 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?
  12. 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?
  13. 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
  14. 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?
  15. Thank you @ZachSaucier just transformed it in a standalone function getting most parameters it needs paramters like: slider(target='.target'....)