Jump to content
Search Community

bromel

Premium
  • Posts

    71
  • Joined

  • Last visited

About bromel

Recent Profile Visitors

4,072 profile views
  1. bromel

    New GSAP 💚

    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.
  2. 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. https://codepen.io/w9914420/pen/vYVPEam 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
  3. 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
  4. 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
  5. @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
  6. 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!!! ?
  7. 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. version2 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
  8. Hi Jack, Thank you for getting back to me just to clarify. 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. So this is part which I am trying to comprehend, just for some background I have based my example on this pen Tween the progress of a timeline which is just using JavaScript and works similar to my react example. hence the use of the timeline.
  9. 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?
  10. @ZachSaucier Many thanks I can see where I was going wrong, and thanks for the article link, very insightful
  11. 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.
  12. Hi @GreenSock many many thanks, yes it makes complete sense to me Thanks Bromel
  13. 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
  14. 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. https://codepen.io/w9914420/pen/oNNNoVw Just thought I would share for anyone else interested ?
×
×
  • Create New...