Jump to content


  • Posts

  • Joined

  • Last visited


2 Newbie

Recent Profile Visitors

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

  1. That's what I needed, thanks a lot!
  2. 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.
  3. 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!
  4. 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!
  5. Yes, thank you very much!
  6. 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).
  7. 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?
  8. 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!
  9. Emilek1337

    Hiding text

    Thank you so much, such an easy way to do it. I was overthinking it I guess..
  10. 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.
  11. 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.
  12. 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?
  13. 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.
  14. 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.
  15. 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?