Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

bromel

Members
  • Posts

    65
  • Joined

  • Last visited

Recent Profile Visitors

3,321 profile views

bromel's Achievements

26

Reputation

1

Community Answers

  1. 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
  2. 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.
  3. 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?
  4. @ZachSaucier Many thanks I can see where I was going wrong, and thanks for the article link, very insightful
  5. 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.
  6. Hi @GreenSock many many thanks, yes it makes complete sense to me Thanks Bromel
  7. 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
  8. 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 ?
  9. Hi @OSUblake many thanks for the heads up regards Bromel
  10. 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
  11. Hi @ZachSaucier Your solution is very very clever ? many thanks.
  12. 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. https://codepen.io/w9914420/pen/QWWLopJ?editors=1010
  13. 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).
  14. 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
×