Jump to content
GreenSock

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

Moderators
  • Posts

    636
  • Joined

  • Last visited

  • Days Won

    21

Everything posted by Shaun Gorneau

  1. I think what you're looking for are negative relative positions rather than a delay. But I maybe misunderstanding. If there are to be any two tweens on a single timeline overlapping for any amount of a time, a negative relative position can pull it back on the timeline so the tweens don't butt up to each other. Have a look here to see if this helps
  2. Hi @pfash and welcome to GreenSock! There are quite a few ways to do something like this, some better than others depending on the scenario. But here a few ways ... option 1 shows how to use the delay property of a tween option 2 shows how to use a "dummy" tween to stick some time into the timeline where nothing actually happens option 3 shows how to inject an addPause to a timeline and then use a callback function to undo it some time later Hope this helps!
  3. @RyRInfo, have a look here to see how I tween a span behind an SVG to look fluid like. A few notes ... The "fill" is actually a span with a background color that is showing through the SVG and I'm tweening that span. This is all inside of a div with a border and border radius with overflow:hidden to mask any of the span outside of the circle. You could so something similar by leaving the R&R letter fill transparent in your SGV, but actually leave the area outside of the letters white to "mask" the span. I put mask in quotes because it's not an SVG <mask>. That is also another option ... explained here. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask Also note that the amount of the tween is based off of a data-completion attribute on each wrapping div ... so a bit of the JS is just calculating how much to tween the span. I just find making a knocked out SVG and stuffing it into a DIV with overflow hidden an easier way to do these things. Here is a simple CodePen showing that. Hope this helps! EDIT: Did the SG for my initials ... it's not of mixup of GreenSock initials
  4. Hi @Emilek1337, Depending on a few things, you could tackle this in a few ways. You can declare the timelines outside of the onload in the global scope, and then build one within the onload and then again make reference to the other from within the onload scope. Like this, Or, you certainly can include everything with the onload scope ... just know that means no Javascript will fire until all assets are loaded. Or, you can build a master timeline and stuff that with timelines to handle the natural sequencing.
  5. Hi @Emilek1337, Yup, certainly You can initially give the .img elements an opacity of 0 and then put all your code into a window.onload ... and within in that, tween the first to opacity 1 as way to bring it in nicely .. then set all to 1 to make them ready. Here is a codepen showing how to do that,
  6. Other than the forums (which is always a great place for answers!) ... there is always the documentation to take a quick look at too. In this case, the video is on the SplitText page It's quite a way down on the page, but there https://greensock.com/docs/Utilities/SplitText
  7. Hi @BalkanBrothers, I believe this is what you're looking for SplitText Update: Nested elements and emoji
  8. That's great!! Good luck with the project!
  9. OK, that makes sense. I would apply that CSS to a single element somewhere up the DOM (generally <body>) and undo it with Javascript within the onload ... like this. A lot less to manage and undo Also, @Jack ... now that is simplified!! I hate when I don't think of these things!! ?‍♂️
  10. @Enzo Ustariz, You can also simplify everything by making use of the timeline's delay property. Also ... I'm not so sure why you are setting opacity in CSS to the set() autoAlpha to 1 and then tween from() 0. You can remove all of the CSS opacity /visibility values, set those elements to autoAlpha 0 and then tween to() 1 ... here is a CodePen illustrating
  11. Absolutely! Here's an updated CodePen to show the mechanics of that.
  12. @joshpitzalis You could (maybe) approach this differently in terms of "what" is dragging the task. What if each task was timestamped either via a data-attribute or a javascript property value ... and an interval runs every minute to query the current time and the timestamps of any tasks. If the current time is equal to or greater than the timestamp of a task, that task is simply .set() to a rotation around the center point +=6° (to stay in line with the hour hand) Also, if the hour hand is actually sweeping the whole time ... the tween could be a rotation of 360° over 3600 seconds to account for constant motion. Just a thought Edit: changed 1° to 6° (whoopsy)
  13. Hi @Emilek1337, There is certainly an easier way. You can either use Javascript to reverse the order of the images in the DOM (to take advantage of a natural stacking order), or you can loop through to set the z-index based on the number of images. Here is an example of how to assign the z-index while looping through the images. Hope this helps!
  14. I've had that happen occasionally ... I think it's just a hiccup.
  15. Simple is my favorite kind! ? Happy to help.
  16. Hi @bdrtsky, It's the jump to the transformPerspective and transformOrigin during the initial tween. If you set it before hand, I think you'll get what you're looking for. Hope this helps!
  17. If by trumping you mean "undoing all property changes done by other tweens", you're looking for `clearProps: "all"`.
  18. But Jack, that makes too much sense! ?
  19. This seems to run even better on an old iPhone 6 ... wondering if you see the same.
  20. This is tough ... they both tween wonderfully smooth on anything I'm reviewing with (2013 MacBook Air , 2016 iMac , iPhone X, iPhone 6). If I had to take a guess at what is computationally expensive on lower powered machines, it would be that all the stars are generated with box-shadow.
  21. I'm not sure on the <use> question ... in my tests, use doesn't even load the external resource ? I would have to defer to the SVG champs around here!
  22. @Alan Kell a class alone making use of some absolute positioning with `top: auto` and `bottom: some-pixel-value` **might** work ... but i would opt for 1. The calculated Tween to get it into position 2. Some DOM manipulation to actually place into this place in the DOM (while immediately performing a clearProps to remove tweened values) 3. Some CSS to override its absolute positioning and accommodate any margins it might need to "stay" in place Here is a CodePen showing what I mean. (full page view due to height) https://codepen.io/sgorneau/full/ZwojGG Hope this helps!
×