Clms

Ah, so easy. Thanks for your input, I think I can solve the problem now

Thanks a lot! I thought there might be a plugin for that. This solution is what I have had in mind as well, but how would it work with a slideshow? That's my issue - I only can do it for a static object, not something that changes/moves in the background? Thanks so much!

Hello, I am trying to think about a possibility on how to put a logo on top of a photo. The logo should be "filled" with the photo but vertically mirrored. If it was a static photo, I would put an SVG on top of the image and fill it with the mirrored version of the background photo. In my case the background image is not static, it is a slider - so the image changes automatically. I now want the logo on top always shows the vertically mirrored version of what is currently behind the logo. Kind of like "glass". No matter what, I could not find a solution in my head. Any idea on how to tackle this issue? Attached you will find an exmaple on how I imagine the look. Thanks a lot!

Hi there, I wanted to start with an animation of a tree branch. Therefore I want to animate a branch which grows in size and width (to a pre-defined size) along with leaves that appear and grow to their finale size. So I came here to ask if there are any examples I can use as a starting point? Thanks a lot in advance. Best regards, Clemens

Thank you both for your solutions, I really appreciate it a lot! Thanks so much.

Thanks a lot for your answers! I am not sure whether my code is well coded or not, but I solved the eye following the cursor by drawing/calculating a line from the center of the eye to the position of the cursor. At the intersection of this line with the circle of the eyeball, I get the point of how far the pupil is allowed to move. Now I wanted to include @GreenSock's approach but failed hard. Can't work it out how to combine this solution with my attempt. I am also open to different approaches, mine is probably way too complicated. Thanks so much for your time and effort!

Hi, I know easing and how to use it. It manipulates the acceleration of objects over a given timespan. At the moment I want to achieve something similar but in relation to how far the cursor is away from a given point. I need it for eyes where inside a circle the pupil follows the cursor. The closer I am to the center of the eyeball, the fewer the pupil should move to the direction of the cursor. When I move the cursor away, the pupil should move to the very edge of the circle (eyeball). It would be nice if there is a way to define a curve (similar to easing) on how far at a given point the pupil goes away from the center of the eyeball. In a simplified example that would mean: Given is a box with a with of 1000. Inside this box, there is a dot. The dot follows the cursor on the x-axis. The cursor and the dot are at x = 0; Normally if I move the mouse to x = 500, the dot is also at 500. In my case I want the dot to accelerate over the distance, meaning at x = 0 the dot is also at 0, at x = 1000 the dot is also at 1000 but when the cursor is at 200, the dot is maybe at x=20, when the cursor is at 500 the dot at x = 200, etc. Would appreciate any input on this problem. Thank you!

Oh, great! Thanks a lot

Hi, I applied a gradient two an SVG. The gradient stretches over two circles. When I move one circle manually (change the position of the circle-element within the SVG), the gradient works fine (a different part of the gradient is sown on the circle). But as soon as I animate the circle, the gradient on the circle stays the same - it seems like the gradient is only rendered in the beginning. How can I make it work, that when the circle moves, the gradient on the circle changes accordingly? Thanks a lot!

Thanks so much. It looks promising but I don't really grasp the idea yet. It is about moving elements up and down instead of actually scrolling? Wouldn't it be possible to check for the end of the scrolling movement then calculate the distance from the last scroll, take a fraction of that distance and apply a y transform with easing to one element, so it has an effect of "slowing down" with little friction? I found two other websites using this effect. One has a js included, that is not minified with comments. Nonetheless, I don't understand the code. The other example has a smoother / nicer scrolling effect tough. I would love to be able to use the same effect. Website 1: https://techstylefashiongroup.com/ JS Website 1: https://techstylefashiongroup.com/wp-content/themes/techstyle/js/scripts.js?ver=20161204 (please look for "function animateParalax() ") Website 2: https://www.shift-capital.com/about Cheers!

Hi, I want to recreate a scrolling effect from a gif: https://imgur.com/c1vgdkg On object (box with text in it, image, etc) scrolls at a different speed than the rest of the page. So I decided to try it with scrollmagic + greensock. The result was okish but not really what I intended. Two things are missing: - My box (which should scroll slower than the rest of the page) starts scrolling slowly only after it is almost completely in the viewport. It should already enter the viewport with a different speed than the rest of the page. - Once I stop scrolling, the box immediately stops as well. I would love to recreate this "delay" effect like the box is sliding a bit further, even tough scrolling has stopped. A bit similar to like when it would be on the ice and can't break immediately. Thanks! - Clmsvie

Hi there, I was playing around with the morph plugin and liked it a lot. I tried to morph organic forms into another, smoothly. There is one issue I encountered; during the process, "sharp" edges are created - it does not look organic anymore until it reaches the final state. It seems like it stops a short moment when reaching the final SVG form - I would love it to be a continuous, smooth process without any kind of stopping. Would appreciate your input a lot. Please consider me an absolute beginner who is willing to learn about this :) Thanks a lot, Clemens

Thanks for your reply! If I convert group 1 into a path it's isn't possible to define different background for each element, isn't it? Group 1 consists of many triangles - each has an different color. Combined together they appear as an object. What would be the most elegant way to morph on of these "triangle-objects" into another? Thanks a lot!

Hi! I was wondering if there is the possibility to morph groups instead of single paths? Let's say I have two images/groups. Each image consists out of 30-50 paths, organized in two groups (one for each image). Now I would like to morph the first image (therefore group) to the second image (therefore second group). Is there a shortcut or do I have to morph any single path by it's own? Thanks! Clemens