Jump to content

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


  • Posts

  • Joined

  • Last visited

Everything posted by Emilek1337

  1. You are right, they do go out of viewport. My question was more how do I make them wrap when they are continuously moving? How do I detect that one div went out of the viewport and append it on the other site? Could you provide an example or at least give me some hints? It would be very helpfull. I read the other topic you provided but I think it's a bit different since you are moving the block on click there.
  2. Is it possible to animate element's width like on mollie's page? I'm talking about the payments "slider". I can for example move the div by xPercent 100, but they it goes completely out of the viewport, I want it to always stay in viewport and only go left and right like on mollie's page. It goes left and right till it touches the end of the div. https://www.mollie.com/en Im talking about the animation on the screenshot
  3. I want to animate my svg with stripes in it. However, when I animate it, the whitespaces between the stripes is removed and it becomes 1 straight line. Any ideas about how to fix it? + Is animating the initial viewport with scrolltrigger a good practice performance wise or should I create a timeline for it?
  4. Yup, it was a version problem, was using 3.3.1. Thanks for your help!
  5. It looks somethings like this, but then with correctly registered scrolltrigger etc., couldn't do it on codepen. https://codepen.io/hachiko0/project/editor/APjvGN
  6. Hi, yes unfortunately you can't recreate the behavior using codepen alone. What I created in my project specifically is a animationGenerator function, with switch case, and 1 case looks like this: case 'fade-up': { let tween = gsap.from(element, { y: 100, opacity: 0, scrollTrigger: element, }) } It works with data attributes, so when I give a data-animation="fade-up" to a div, it animates like the tween above. However, when I scrolled a bit on a page and I refresh the page, the elements above the current position are hidden and because I'm scrolling up they won't even animate. What I want is to show the divs above my current refresh position without the animation. Does that make any sense to you now?
  7. When I scroll down on a page and refresh, the animated elements above the refresh position are hidden. How to make them visible after the refresh?
  8. That's what I needed, thanks a lot!
  9. I didn't really understand your explanation. Do you mean something like this? https://codepen.io/vountish/pen/VJLmLQ I'm using an overlay because I don't want the image to stretch out, so I don't modify the image at all, I only move the overlay so the images becomes visible.
  10. Thank you for the solution. I already considered this one, and was going to use it, unless gsap had it's own solution to this. I'm animating a lot of things like that on quite a big site, so I was looking for an automated solution, but it seems like playing with pseudo elements is the only options. Anyway, thank you all for help!
  11. Emilek1337

    Overlay color

    Hello, I am revealing an image by putting an overlay on top of the image. However, the background has 2 colors, and I obviously can set only 1 background color on the overlay. Is there a way for the overlay to inherit the color? Maybe a gsap property? I thought about using after & before, but it would take a lot of time when doing it for multiple images. Any ideas? I added a codepen for clarification. Thanks in advance!
  12. Yes, thank you very much!
  13. Thanks for the reply. I didn't explain my problem the right way, sorry for that. I can't use customEase on codepen, but I created this: https://codepen.io/vountish/pen/KLEwrJ?editors=1111 to show the concept I'm talking about(animation is not working, I'm just showing the concept of the custom ease). Moving something by 100% to the right with a customEase, then moving it 100% the right again(200%) with the customEase I used but reversed(so like easeIn for 100% easeOut for 200%, but using my customEase).
  14. Hello, is there a way to reverse the custom ease I created? I have an ease and I want to ease the out transition exactly the other way around. So for example it comes with a fast-slow ease and I want it to go out with slow-fast ease, with the exact same values but swapped. Is there a way to do it?
  15. Emilek1337

    GSAP Reverse

    Hello, I'm currently creating an offcanvas menu animation using GSAP. I was using timeline.reverse to play the reversed animation when closing the offcanvas menu, however I decided to change the reverse animation a bit, so I created another timeline and I use it when I would use the reverse animation normally. Everything works fine, but after I open & close the menu(run the animation and my reverse animation once) the animation doesn't trigger for the second time. I've created a simplified codepen, with the same issue. Thanks for the help!
  16. Emilek1337

    Hiding text

    Thank you so much, such an easy way to do it. I was overthinking it I guess..
  17. Emilek1337

    Hiding text

    I'm trying to animate the text so it goes out of the div, and the div has overflow hidden. I'm not sure if that's the right way to do it. I've set the height of the h1 to like 35px and I set the span's position absolute inside the h1, but the h1 is not getting the width of the span inside of it and I don't want to give a fixed width to the h1. If u have to hide the text, do you do it like this? I don't want to play with autoAlpha etc. I just want to move the text outside the div.
  18. Yes I mean the image that is revealing on the green background, it has 2 backgrounds, and I think you just provided me a solution, however I don't really understand how I can animate it, could you provide me a codepen if possible? Until now I just covered the image I'm animating with a overlay and animated the overlay to width: 0, and it worked every time, but now I'm struggling cause the background has 2 colors just like in the example.
  19. Is it possible to create an image overlay that has the colors of the background? I'm revealing the images by putting an overlay on the images and then tweening the width of the overlay from 100% to 0%. But how can I do it when the background has to colors like here? http://rsk.by/ In this example the background is like 80% green and 20% white, but the image is still revealing because of the overlay changing it's width i think. How can I achieve this?
  20. Thank you, let's say I have timelines which are depending on the duration of the imagesanim timeline. Can I put all of my code in the window.onload function? Because otherwise the imagesAnim.duration() for example won't be accessible outside the function scope.
  21. Emilek1337

    Images onload

    I'm creating a page intro with gsap. It looks ok for now. However if you open the site for the first time, all images get loaded at once, at page load, it results in like 0.5s when the imges are all shown at once before the animation actually begins. Can't I set the visibility to hidden and only show the images when they are being animated in gsap? So just before I animate the given picture, just set the visibility to visible using gsap or some other way to load the image only when it's actually needed.
  22. Thank you so much. I'm also creating a loading bar which changes the width from 0 to 100%. I want to make the bar animation as long as the background images animation. So when I end animating the images the loading bar is at width 100%. Can I somehow connect the loading bar animation to make it always equal to the duration of the other timeline with the images?
  23. Im animating background images using autoAlpha to smoothly animate the images when they change, however the images switch only when I set the z-index according to the order. Now let's say I want to animate 100 images one after another like I did in the example. Is there a better more efficient way to just set the z-index on the item that is being animated at the moment or something like this? I'm looking for a better way to order the images. Btw. Am I doing the crossfade the right way? I need to zoomin and switch images, is this the best way to do it?
  24. Thank you for your help, I can't really make use of your example cause I use the overlay animation to reveal an image underneath. So I have the overlay and with my fromTo I hide the overlay and the image is shown. I don't think thats the right way to do this. Can't I just somehow animate the img width from 0% to 100% starting from the right? I want to achieve similiar effect to this example: https://elimchan.com/
  25. I have a code like this: .fromTo(".overlay", 2, {scale:1.5}, {xPercent:100, transformOrigin: "0 100%", ease: "gil"}) The overlay goes from left to right, how can I make it go from right to left? Im using TimelineMax