Jump to content

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

Shaun Gorneau last won the day on March 3 2019

Shaun Gorneau had the most liked content!

Shaun Gorneau

  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Shaun Gorneau

  1. Hi @marko krstic, The reason you get this behavior is that you're using a selector of ".line" which will gather all .line elements in the DOM and stagger through them. To affect just a single grouping of them, you'll want to use a unique parent identifier to single out a group. That could be done in a number of ways with selectors of various types ... the easiest would be an id attribute on each SVG. Have a look at this CodePen and my notes within, Hope this helps!
  2. Looks at email notification that just came through .... backspace, backspace, baaaaaaaaaaaaaaaaaackspace. @PointC beat me to it! ? And @Exhumator ... your English is great!
  3. Hi @Thiago Kadooka, I'm unsure if you are having trouble with the onCompleteAll parameter .. or if the issue is somewhere after you call the function in that parameter. Have a look at this CodePen. Note ... this.target will will return the last tween element.
  4. Hi @MathieuDaix, A quick solution would be to assign a `linesClass` in the splitText() vars, then use that class as a hook for jQuery to wrap() those lines with another div. Here is a CodePen showing that. There is also a non-jQuery option at the bottom of the script. You can see below, each <div class="myLines"> (assigned with splitText ) is wrapped in a <div class="myLinesWrapper"> ( done with jQuery ). Hope this helps!
  5. A few simple things I can think of are 1. Use different durations so it doesn't move so uniformally as a unit 2. Easing with Sine.easeInOut for more gentle transitions 3. Tween the y value up and down a bit for the rise and fall of a wave Hope this helps!
  6. @EricIEM, I’ve never used GDM, but if it has its own timeline mechanism, GSAP would likely not have any hooks into that. Furthermore, if GWD’s output is straight to CSS transforms ... then that would fight GSAP as GSAP interpolates javascript object properties. GSAP constructs its own timelines with its own properties and methods. If you post your project or a code snippet, we can give you much more specific help.
  7. Hi @kmytor, Using set() is quite different than to() or from() in that set() changes property values instantly (no tween). For example, In the above CodePen, the circle is tweened from x:0 to x:300 over 3 seconds and then immediately jumps to x:150 and then tweens from y:0 to y:100 for 2 seconds. The reason I used set() for the position property is that all position values are non-numerical values ('static', 'relative', 'absolute', 'fixed', 'sticky', 'initial', 'inheret'). Tweens will not happen for those values ... it will just jump to them. So, for the sake of keeping things clear, I like to use a set() where anything will jump to a value immediately. Note that when I say position can't be tweened, I mean the 'position' CSS property specifically. An element's position (i.e. placement) on the page can certainly be tweened with x, y, top, left, etc. Hope this helps!
  8. @kmytor, The biggest issue with your CodePen example is that you are setting the position property to fixed var AnimaWeb = new TimelineMax().add([ TweenMax.to(".ass picture", 1, { top: "+=50%", position: fixed, delay: 0 }), In that way, the script is looking for the value of a variable fixed, not setting the value to 'fixed' var AnimaWeb = new TimelineMax().add([ TweenMax.to(".ass picture", 1, { top: "+=50%", position: 'fixed', delay: 0 }), Here is an updated codepen with that corrected along with chaining the Tweens and using a few set() methods. Also ... if you have further questions about this please start a new thread so as to not deter from @niallmckenna's questions. Thanks!
  9. Hi @Salakala, I’m on mobile right now, so I can jump into a CodePen ... but maybe look at an elastic ease (or custom ease) for a tween with a long duration.
  10. This reference sums up any advice I could offer. https://developers.google.com/web/tools/chrome-devtools/rendering-tools/
  11. Looking further down ... it looks like you're doing all the interpolating way outside of GSAP ... so that is all happening without a Timeline's awareness. And following to(), from(), etc is just going to be called. (I'm on my first cup of coffee ... so I could be wrong) In regard to tweening the SVG shape and position ... you should probably look at MorphSVG in combination with simple tween properties (y in this example). https://greensock.com/morphSVG
  12. Hi @Reincha, Yes, the commented out version is correct! If you place a call to a function directly into the add() parameter, it's called at runtime. When you pass an anonymous function as the parameter, it's called at that position in the timeline. Have a look here to see that even if you .add( someFunction() ) to the very end of the timeline, it's called immediately. Hope this helps!
  13. Hi @Exhumator, there reason for this is that there is only one set(). That function value is only being set() once and then repeated 5 times. You can use the Modifiers Plugin to accomplish this. https://greensock.com/modifiersPlugin Hope this helps!
  14. I just checked it out on mobile and I’m really impressed!!! Beautiful execution of user-focused design! Well done!
  15. Hi @saomartinho! It's probably easier to show some code with notes, so here you go! Hope this helps!
  16. Happy to help, @lsloss! And thanks ... I am feeling better today!
  17. Hi @flowen ... I'm not seeing much of anything in the results of your pen, so I'm not sure what to look for. But I do see a few issues off the bat. Your DrawSVG tweens are calling the SVG directly, but draw SVG expects a path, rect, ellipse, line, polyline, or polygon. Also, I'm sure how well this will play with xlink to the symbol path. Any way you can do this with one SVG alone?
  18. Hi @lsloss, have a look here to see "one way" it can be done. I say "one way" because I'm sure there are better methods than my ternary operator ... but I'm not feeling well today and it's all I can think of right now! ? Hope this helps!
  19. There is a lot to dissect here, unfortunately. Here is a Pen to get you started ... if you can link to some Creative Commons images for a small test case, that would be helpful. Do you see the same result in the DOM if you were doing this to simple <div>s? (rather than images)