Emilek1337
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Emilek1337
-
-
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
-
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?
See the Pen mdVBxMm?editors=1111 by vountish (@vountish) on CodePen
-
Yup, it was a version problem, was using 3.3.1.
Thanks for your help!
-
1
-
-
42 minutes ago, ZachSaucier said:
It makes sense but this behavior might depend on how the animation is called. As shown in the code I provided above, things are rendered above the refresh.
Can you please provide at least the structure of how your JS is setup related to the ScrollTrigger/switch statement that you show?
It looks somethings like this, but then with correctly registered scrolltrigger etc., couldn't do it on codepen.
-
1 minute ago, ZachSaucier said:
Hey Emilek. I can't reproduce this behavior. Here's what I'm trying (though from a local file since you can't refresh in CodePen due to the iframe):
Can you please create a minimal demo (or better yet, just modify the one above) that recreates the issue that you're talking about?
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?
-
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?
-
1
-
-
7 minutes ago, Visual-Q said:
You can make the image the size of img-box instead of relative to the wrapper size like this if the img-box has a fixed size.
That's what I needed, thanks a lot!
-
1
-
-
34 minutes ago, Visual-Q said:
Depends on whether you have any reason for using an overlay other than hiding the image, by animating the image's wrapper size instead it's parent still holds it's place in the DOM but there is no need to match the background as it's transparent until the img wrapper 'fills it up'.
I didn't really understand your explanation. Do you mean something like this?
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.
-
5 hours ago, Jonathan said:
Hello @Emilek1337 and Welcome to the GreenSock Forum!
I have a different take on your question by just adding one CSS rule to your code.
But lets answer one of your questions... You asked the following:
Technically you can have 2 background colors on your element. This is done by using CSS pseudo-elements of ::before or ::after. The .img-overlay element has the pink color as its background, and the generated content of the ::after CSS will give that DeepSkyBlue as your 2nd background color.
For example you can add the following CSS rule to your codepen .img-overlay::after.
.img-overlay::after { content: ""; height: 50%; width: 100%; background-color: DeepSkyBlue; z-index: 99; position: absolute; left: 0; bottom: 0; top: auto; }
Like this:
Happy Tweening
Resources:
Pseudo-Elements: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
::before https://developer.mozilla.org/en-US/docs/Web/CSS/::before
::after https://developer.mozilla.org/en-US/docs/Web/CSS/::after
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!
-
1
-
-
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!
-
22 hours ago, GreenSock said:
Just so you know, you can use any of the bonus plugins on codepen for free. We created special trial versions which are all listed here:
I whipped together a helper function that'll simply invert an ease for you. Just feed in the ease and it'll spit back a new one that's inverted:
Here's the function:
//feed in an ease and get back a new inverted version of it. function invertEase(ease) { if (typeof(ease) === "string") { ease = CustomEase.get(ease); } return function(p) { return 1 - ease.getRatio(1 - p); }; }
Does that help?
Yes, thank you very much!
-
10 minutes ago, GreenSock said:
Hi @Emilek1337. Welcome to the forums.
It sounds like you're talking about a simple yoyo. You can set repeat:1 and yoyo:true on a TweenMax or TimelineMax instance to get that effect. Or just reverse() the animation anytime. If you still need help, a codepen would be super helpful so we can just tweak things in your context.
Happy tweening!
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:
See the Pen KLEwrJ?editors=1111 by vountish (@vountish) on CodePen
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).
-
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?
-
GSAP Reverse
in GSAP
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!
See the Pen NVjgLP?editors=1111 by vountish (@vountish) on CodePen
-
Hiding text
in GSAP
36 minutes ago, Shaun Gorneau said:hi @Emilek1337,
Here is a fork of your pen showing how to tween text outside of a div, but let the div mask anything outside. I've made a few notes within the pen to show you what I changed.
Hope this helps!
Thank you so much, such an easy way to do it. I was overthinking it I guess..
-
Hiding text
in GSAP
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.
-
13 minutes ago, PointC said:
I'm a little confused by the question too.
Are you talking about that first animation where the picture overlaps the green background? If that's the case, I'd just use a clip-path or mask to reveal the image rather than a solid color overlay. If you put the image in a SVG and use a clip-path, you should get support across all browsers.
Happy tweening.
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.
-
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?
-
15 minutes ago, Shaun Gorneau said:
Hi @Emilek1337,
Yup, certainly
You can initially give the .img elements an opacity of 0 and then put all your code into a window.onload ... and within in that, tween the first to opacity 1 as way to bring it in nicely .. then set all to 1 to make them ready.
Here is a codepen showing how to do that,
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.
-
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.
-
1 minute ago, Shaun Gorneau said:
Hi @Emilek1337,
There is certainly an easier way. You can either use Javascript to reverse the order of the images in the DOM (to take advantage of a natural stacking order), or you can loop through to set the z-index based on the number of images.
Here is an example of how to assign the z-index while looping through the images.
Hope this helps!
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?
-
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?
-
19 minutes ago, Shaun Gorneau said:
Hi @Emilek1337 and welcome to GSAP!
Within the fromTo, your starting *from* a scale of 1.5 (and not tweening that property in the *to* so no change) and going *to* xPercent: 100. So, what you want is the from to start at xPercent: 100 and go to xPercent: 0. See the CodePen illustrating this.
Hope this helps!
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/
-
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
Element's width animation
in GSAP
Posted
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.