bromel
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by bromel
-
-
Hi @PointC
Thank you for the quick reply, I have updated my original codepen, which now shows you the initial effect that I was trying to obtain, i thought best to separate my concerns without making it complicated. Has you can now see in the full version on the 'out' transition the 'para-lines' move down on the Y axis by 20. This works as expected on the first instance when the animation is ran, but after that it keeps on adding 20 units on each cycle.
I have tried using relative units and then clearing them on completion of each cycle, but this does not work
This is the first cycle, notice the transform matrix values
When I tried to clear the value it remained the same and just added another 20 units to the value.
I hope this clears things up and thanks again
Bromel
-
Hey @PointC
This is FANTASTIC!!! many thanks
just a very quick request, I was also wanting to get the lines to drop down by 20 on the Y axis, this is what i originally written:
function clearData(object) { let tl = gsap.timeline(); // tl.to(object, { y: 90, duration: 1, autoAlpha: 0 }) .fromTo( "#para-long-line", {y: "0"}, { y: "20", duration: 0.8, ease: "power4.out", autoAlpha: 0 }, "start+=.1" ) .fromTo( "#para-short-line", {y: "0"}, { y: "20", duration: 0.8, ease: "power4.out", autoAlpha: 0 }, "start" ); return tl; }
Unfortunately it kept on moving the lines down on every cycle, was not quite sure on weather my method or maths was at fault, any further pointers would be great, many thanks again
-
Good evening EveryOne
I have been scratching my head on this one and thought I would be better to share the problem.
So I have been playing around with morphSVG and been blowing my mind🤯 with its features.
I am created a master timeline that utilises two functions to create my animation.
On the very first instance you will see a circle come onto the scene followed by two lines being drawn onto after the circles appearance.
In the second instance i then fade away both the lines and circle.
The animation is then repeated another two times using different coloured circles.
Now the issue that I have is that MorphSVG only works correctly on the very first run of the animation, after that the effect no longer works on the other two cycles.
I have tried to call a 'clearProps' method at the completion of the animation but this does not work, I am a bit stuck, so any pointers will be appreciated.
regards
Bromel
-
@GreenSock Hi Jack,
Been a long time, hope you doing well! 😀
Thank you very much for the explanation into what was going off, my javascript knowledge has regressed somewhat over the years, so Im just starting again from scratch.
So in regards to this particular use case I best explain its purpose.
1. I have a submissions form on a website that will be used to submit personal details to a private server.
2. When the user submits, I make a request to the server and wait for a response, during this time we have a spinner (like in my demo)
3. The variable represents the response so, my intention is that when I get the correct response, I can stop the animation and show another, depending on the type of response that I get.
I hope this makes sense.
p.s If there is a more performant way of doing this, please feel free to show
Many thanks again
Bromel
-
Good evening All
It has been a long time since I have been here in this amazing forum, with you amazing people, I actual thought I was done with the GSAP lifestyle
but NOOOO!!! the call was too great, Anyways I have come back to version 3.11.5 which seems very impressive.
So I am learning again and I am trying to use the 'onUpdate' parameter in a tween.
The issues that I am having is that I want to change the value of a variable by button click, which I can do. It seems to be that during the animation the instance of the variable does not change. but it is clear that it has change during the pressing of the button.
Im guessing that it is my application that is at fault, so any help, tips, or pointers would be very appreciated.
P.S It's good to be back!!! 😀
See the Pen ZEqrbVq?editors=1111 by w9914420 (@w9914420) on CodePen
-
@ZachSaucier many many thanks 😍
-
Hi all,
Just been back and had another look at this and changed a few things.
1. Using transform shortcuts
2. Stopped adding duration on selection.
See the Pen wvojBQV by w9914420 (@w9914420) on CodePen
I am just trying to understand this.
//tween the animation in accordance to it's progress gsap.to(tl.current, { duration: 1, progress: count });
My expectation is that when it is called it should tween the animation forwards or backwards in process?
regards
Bromel
-
Hi Jack,
Thank you for getting back to me just to clarify.
Quote- I don't think transform: "translate(100px)" is valid - the translate() is supposed to have an x and y value. But I'd strongly recommend NOT animating the "transform" attribute at all - just use the individual transform component shortcuts like "x", "y", "scaleX", "rotation", etc. instead because those are optimized for speed and make your code more readable/concise.
I based the use of 'translate(100px)' from the MDN Web Docs - translate() but I complete understand your point in regards to speed and readability.
QuoteYou keep adding a 3-second tween to the same timeline each time a new selection is made - that's why the duration keeps going up. Why are you using a timeline at all? Usually those are for grouping animations and controlling them as a whole. At the very least, you could clear() the timeline before you add another to()
So this is part which I am trying to comprehend, just for some background I have based my example on this pen
See the Pen mdeoemx by GreenSock (@GreenSock) on CodePen
which is just using JavaScript and works similar to my react example. hence the use of the timeline. -
Hi all ☺️
What I have done is created a timeline that plays a simple animation but in time this will be replaced by a more complex one in React.
In my example I have created a drop-down menu with various cities to select and I am wanting to control the progress of the animation based on this selection.
As you can see I am able to change the progress value for my tween, but I am getting unexpected results.
I assume that i am just approach this wrong so I was wondering what is the best way to achieve this in React.
Many thanks.
Bromel
P.S It seems that my method doubles the duration of the tween, but I don't know why?
-
@ZachSaucier Many thanks I can see where I was going wrong, and thanks for the article link, very insightful
-
Hello all 😊
I have been trying to learn the new GSAP 3 and I am not sure how to tween the progress of a timeline correctly.
What I have done is created a timeline that plays a simple animation but in time this will be replaced by a more complex one.
In my example I have created a drop-down menu with various cities to select and I am wanting to control the progress of the animation based on this selection.
As you can see I am able to change the progress value for my tween, but I am getting unexpected results, as an example I go from 'please choose one' to 'London'
in the expected manner but from 'london' to 'please choose one' behaviors in an unexpected manner.
I assume that i am just approach this wrong so I was wondering what is the best way to achieve smooth and even transitions between all the values of the select menu.
many thanks.
See the Pen yLYwyWp?editors=1011 by w9914420 (@w9914420) on CodePen
-
1
-
-
-
1
-
-
hi guys
I keep getting this warning in my console in regards to this piece of code
.to(verifier.dom.container.find('#left-eye'), 3.32, {morphSVG:'#left-wink', type:'rotational', origin:'0% 50%', ease: Power2.easeIn}, 'time+=17.4')
now i am not quite sure why, have i done something wrong?
many thanks
bromel
-
Hi @OSUblake
I stumbled across a video by Chris Gannon which shows a method of creating a 3d effect in SVG and I came up with the below which was the effect that i was trying to create initially.
See the Pen oNNNoVw by w9914420 (@w9914420) on CodePen
Just thought I would share for anyone else interested ?
-
1
-
-
-
Hi all,
I am just experimenting with 3d transforms on SVG elements, i have done a simple pen and been looking into Intro to CSS 3D for some ideas on how to implement. I have done a simple pen and tried to implement it without success. I have seen many examples with html and css and was wondering if the principle is the same in implementing to work. Any help/resources/examples would be greatly appreciated.
many thanks
bromel
See the Pen LYYYLRG?editors=1010 by w9914420 (@w9914420) on CodePen
-
-
I have also tried using the .set method to see if it gets repeated and it does not seem to work, it looks like it gets overridden on the repeat cycle.
See the Pen QWWLopJ?editors=1010 by w9914420 (@w9914420) on CodePen
-
Hi @ZachSaucier
I actually tried something similar to your example, but has you will notice that the timeline will repeat once all the items have completed their staggers, where as in my example I want to create a continuous effect which looks seamless whilst at the same time have the ability to change the line color when it reaches a certain point(time).
-
Hi @ZachSaucier
The reason being is because I am using this timeline within another timeline and I notice that the behavior was slightly different due to the way that I set up my animation. but i will look at the other suggestions that you recommended
Many thanks
-
Hi all
I have created a timeline that repeats a few times but I am wanting to change the colour of each line element when they approach the blue filled window, now this works on the first instance, but has soon has this repeats it starts getting messy. So I wonder is there a way of doing this within the timeline that I have constructed.
Many thanks
Bromel
-
-
Hi @PointC
My very last question on this matter - since we are now using a method to restart our timeline and by using the oncomplete call we can infinitely repeat our timeline, therefore is it possible to have a method of stating the number of restarts. I ask because in the project that I am working on we do not want to have this effect running in the back lets say after 7 secs or in our case after 7 repeats, we want our performance to be as efficient as possible and therefore want to stop the tween after this period.
Many thanks again
Bromel
-
Many thanks @PointC
I forked an old codepen, So that is why I think there is an old version of Gsap
regards
bromel
-
1
-
New GSAP 💚
in GSAP
Posted
Don't want to be an annoyance, but I would have to agree with @limbo that a light version would be nice, with light and dark themes you have to get the colour contrast just right. But I think light theme would be nice, especially in my old age my eyes are quite sensitive.