Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 04/12/2018 in all areas

  1. I think the easiest win here, if I understand correctly, is to just wrap the 6 in another div. rotate the outer "#number" for what you are calling scale, and rotate the inner "#number div" for the number to spin around its center <div id="number" style="position:relative; top:60px; font-size:48px;"><div>6</div></center> Doing multiple transforms on an element and changing the transformOrigin is just generally difficult.
    4 points
  2. It boggles my mind that they put a man on the moon in less than a decade when the total computing power of North America was probably less than a single iPhone and after twenty some years the biggest tech companies in the world still can't manage to get css to render consistently.
    4 points
  3. Hi @KerryRuddock How about something like this? Hopefully that helps. Happy tweening.
    4 points
  4. Played with this a bit and ended up with a rather bizarre solution. I added an extra 2 pixels to the size of the door then offset it -1px top bottom which fixed the outline issue however Chrome wasn't done messing up yet. At least not on my machine. Another subpixel display anomaly presented as a semitransparent horizontal line across the door at about 75% of the way down that rotated with the animation. So I duplicated the door object over top of itself and it appears to render solid. Inspired by a photoshop trick I use to make semitransparent pixels more opaque, duplicate the layer a few times and flatten them together. Of course to the people who couldn't see the issue to begin with it looks like I did nothing at all.
    4 points
  5. That onComplete will fire at the end of the whole tl timeline when all three text elements have faded out completely. You can add onComplete calls to the tweens too if you wanted/needed to do that. Adding one to a stagger is a bit of a different beast though. You have to remember that a stagger returns an array of tweens so adding an onComplete in the vars will fire each time one of the staggered elements finishes its animation. To call a function after all the staggered elements have finished you would use onCompleteAll which goes in a different position. For a tween, it goes after the stagger number. TweenMax.staggerTo( targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) If the stagger is on a timeline, it goes after the position. tl.staggerTo( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* ) Hopefully that helps. Happy tweening.
    3 points
  6. In the future please, try to explain the behavior you would like to see. "I want to make some animation happen at the same time" doesn't really tell us very much when its an app we've never seen with 100+ lines of code. Perhaps something like: "when you hit the deal button I would like the existing cards to move out of the way as new ones come in". After some time looking at the code that was what I had to guess you wanted. The issue you were running into is that you only use one timeline (tl) and every new animation is added to it. If you hardcode a label value into those add() methods what is going to happen is that you are always going to be using the same label for every new animation which means each time you deal, all the animations will be put in the timeline at the same time. When GSAP sees that the label you are using as the position parameter is already in your timeline it will automatically put new animations where that label is. I think what you need to do is just make sure the animations you create on each deal use a unique label name. Notice how I am incrementing the count variable below and appending it to my "label" string. line 117 count++; tl.add(instantTeleport(ids)); tl.add(offsetCards("*overlap*", ids, 100, 0, 0, 0, 1)); tl.add(offsetCards("*adjust previous*", oldIds, offset, 0, 0.3, 0.1, 0), "label" + count); tl.add(offsetCards("*deck => hand*", ids, offset, oldIds.length * offset, 1, 0.2, 0), "label" + count); https://codesandbox.io/s/j7j3117wpv The project looks like it is coming along nicely.
    3 points
  7. It really smoothed things up on Mozilla. Thanks Craig!
    2 points
  8. Please try adding this to your .door CSS: outline: 1px solid transparent; Happy tweening.
    2 points
  9. Just for giggles have you tried rounding that translate down to whole numbers instead of the current two decimals? (or removing it completely) It shouldn't be a problem, but I've seen some odd stuff with my SVG animations.
    2 points
  10. Hi @Pete Barr and Welcome to the GreenSock Forum! You can also try running your SVG code through this online SVG Optimizer, which can help clean up SVG code that might be causing an issue. https://jakearchibald.github.io/svgomg/ Happy Tweening!
    2 points
  11. 2 things I would suggest 1: set up your timeline so that it can pre-record start and end values before it plays. To do that change the last line you have to: hltl.timeScale( 0.7 ).progress(1).progress(0); 2: I really don't see anything wrong with the code, so my guess is there is some oddity or complexity in the svg that is making the browser struggle with a render or something. Do an experiment where you remove the letters in the second staggerFrom() from the svg entirely and add in some very simple artwork like 5 <circle> elements and stagger them instead.
    2 points
  12. You were right twice: i was cryptic and that was the behaviour i wanted Thanks a lot, you gave me a deeper insight on timelines. I guess i do not even need to use a unique timeline instance, i can refactor it. Regards!
    2 points
  13. Ah yeah, sorry that wasn't clear, the problem is totally unrelated to GSAP I assume. The only unexpected thing is, the new batch of images should only appear after it's fully loaded, but that's not what I get (my internet speed is probably a bit slow) and instead I get irregular patterns and images not changing even when, in the console, I do see the src attribute being changed. The only weird thing I noticed with GSAP is that when I tried setting onRepeat and repeatDelay on a TweenMax, it didn't work and I had to use TimelineMax. But that's completely unrelated to this thread! I'll create another one if I do run into the issue again in the future and can't figure it out
    2 points
  14. Sure Visual-Q, here you go. Actualy nothing helped to me so I finally found my own small hack. To parent div I added: border:1px solid black; And for children (door) I added 1px extra to the height and 2px extra to the width and also I set left to -1px. And voilà! Its worked for me, no more those ugly outlines
    1 point
  15. It's the center point (cx/cy) of the big circles. That's what I was referring to in my first reply when I said I had made a slight modification to your big orbit circles. Some of your big circles were at 323, 326.5 etc... so I moved all of them to a 326 326 center and animate the icon groups around that point. Happy tweening.
    1 point
  16. You'd just need to create separate groups for the different speeds. Something like this maybe. Happy tweening.
    1 point
  17. Thank you very much. I had not thought of this solution!
    1 point
  18. Basically where an object on a 3d layer should be flush against some other element. For instance I had a grid of elements that were flush against one another and I was using a card flip/hover effect that kept introducing spaces similar to your outline problem.
    1 point
  19. Could the transforms within in the SVG letter paths be causing an issue perhaps? not sure, probably worth testing. Is the progress 1 progress 0 a recommended thing to do in general? Its useful in situations where you have a lot of concurrent tweens initializing and playing at the same time. I rarely need it.
    1 point
  20. Are you talking about this?: Happy tweening!
    1 point
  21. Wow, that was easy! Thank you so much for the very quick answer! The result is exactly what I wanted to have. I really appreciate it!
    1 point
  22. Nice work Visual-Q. I was reading this post on Stack Oveflow and was playing around with the css outline property with an inset-style to try and get this to work.
    1 point
  23. Nice work, @Visual-Q. Very odd that you have to do all that just to get Chrome to render properly. Sheesh. I actually did see that odd line about 75% of the way down the door. SO WEIRD!
    1 point
  24. I can see the lines in Chrome on my mac in both the original and gsap version. They don't appear in Safari or Firefox. They appear and disappear depending on window size, sometimes top bottom sometimes left right sometimes all around. I've seen it before on other '3d' objects in chrome where items need to line up perfectly, it's a real pain. A subpixel rendering issue maybe?
    1 point
  25. Hi @launchcatapult Welcome to the forum and thanks for joining Club GreenSock. I couldn't get my scroll wheel to work on the site so I'm not sure if everything is 'wired up' yet or not. After I clicked one of the menu buttons the wheel worked, but the whole scene moved really slowly. It's always harder to answer questions looking at a live site instead of demo. I think what you're looking for is the position parameter. https://greensock.com/position-parameter You would add labels to the timeline and then play() from a certain label when one of your transitions is finished via an onComplete callback. Or if you're trying to change the scene in the middle of the transition, you could make that master timeline label jump at the 50% progress point of the transition animation. If you could put together a simple demo, it would be easier to advise you. Here's a some info about that. It does not need to have your actual project assets. Just enough elements to demonstrate the question or problem would be best. Happy tweening and welcome aboard.
    1 point
  26. Here's a basic PIXI container move that should get you started. Happy tweening.
    1 point
  27. thanks for the idea of using a master timeline. the final result:
    1 point
×
×
  • Create New...