Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 11/07/2017 in all areas

  1. Welcome to the forums, @Caj. That brief pausing is simply the result of the ease you're using. Actually, you defined "Power2.linear" which doesn't exist, so it's using the default ease of Power1.easeOut. That makes each tween start out quickly and then slow down toward the end. There isn't actually a pause inbetween at all (that's an illusion). All you need to do is set your ease to Linear.easeNone or Power0.easeOut (or any of the Power0 eases). Here's a fork: Is that what you were looking for? And don't worry, you'll get comfortable quickly with GSAP. Once it "clicks" in your brain, you'll love it. (not that I'm biased or anything) For more information about all the eases, check out the ease visualizer at https://greensock.com/ease-visualizer Happy tweening!
    4 points
  2. Hi and welcome to the GreenSock forums, If it is working in CodePen the same code should work everywhere else. My only suggestion is to make sure you are using the latest version of Draggable. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/utils/Draggable.min.js If you need more help, we will need to see an example of it not working. The simpler the better.
    3 points
  3. Hi and welcome to the GreenSock forums, It sounds like you just want to be able to detect when something that is dragged gets dropped in a certain area. Here is a demo that illustrates those features of Draggable You will see that when you leave a box in the Drop Area that it changes a style (gets a yellow border) at that point you can do whatever you need to: put the element in an array, send a text message, update some value in a form.
    3 points
  4. Thanks Carl this looks spot on! Out of interest when I run that Codepen the boxes are all on top of each other rather than in a column. Is this is a bug somewhere or just my browser being weird? EDIT: Never mind me being an idiot! I just removed... bounds: window Problem solved!
    2 points
  5. No worries @mr.x The reason that works is because your telling GSAP to animate the <use> element directly via their ID selector. So in your tween it's animating the <use> element via CSS ( GSAP CSSPlugin), which in turn animate the graphical element (<circle>) inside the <symbol> element. That is the nature of the SVG <use> element. But you could still animate the graphical element (<circle>) inside the <symbol> element with the GSAP AttrPlugin. Since the CSSPlugin can't be used due to the SVG spec not directly rendering graphical elements inside <symbol> or <defs> elements. If you were testing in Google Chrome browser, it would allow you to see the shadow-DOM in the Dev Tools inspector. Glad you got it sorted, Happy Tweening
    2 points
  6. Hello @hh23 and Welcome to the GreenSock Forum! The reason autoAlpha: 0.99 works is due to how the stacking context works in the browser. That puts the element onto a new stacking layer Please see stacking_context spec One of the ways an element will get a new stacking context is when an: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context In IE you can just set transform-style to flat ( transform-style: flat ) Happy Tweening!
    2 points
  7. Very interesting - it looks like this has nothing to do with GSAP but is related to how some browsers "optimize" SVG rendering in certain situations. If you remove the "perspective" that you set on the SVGs, and make autoAlpha go to 0.99 instead of 1 on those same elements, it resolves things (at least in Firefox that I tested it in). So just 2 changes to your code. Most browsers force anything that's got a 3D-related property set (like perspective, rotationX, rotationY, or z) to get rendered on the GPU, thus it creates a texture for it, often at the original raster size and since you're scaling this up to 20x its normal size, things are getting pixelated when that texture is stretched up. The other odd thing was how the browser decided to totally shift the rendering as soon as its opacity was 1 (but 0.99 was fine). Does that help?
    2 points
  8. I found myself asking the same thing as @ptd in recent months. Finally I found an Adobe After Effects script that converts an AE ease to Greensock custom ease, such as: M0,86.4187C32.9957,86.4187,0,-1297.5813,91,-1297.5813C93,-1297.5813,96,-1297.5813,97,-1297.5813 https://github.com/SupportClass/ae-ease-to-gsap-customease Hopefully this helps developers who work in tandem with interactive designers, where there's a handoff of interactive requirements/mockups.
    2 points
  9. I think most folks around here are going to recommend Pixi.js for 2D and Three.js for 3D. Both work great with GSAP. For a little background on Canvas, please see this post that @osublake was kind enough to turn into a multi-part tutorial on the subject We have PixiPlugin for advanced color effects: https://greensock.com/?product-plugin=js-pixiplugin
    1 point
  10. Solved it! else if (this.hitTest(dropArea2,overlapThreshold)) { $(this.target).addClass("highlight"); } else if (this.hitTest(dropArea3,overlapThreshold)) { $(this.target).addClass("highlight"); } ...etc. was all that was needed.
    1 point
  11. Hi @mercy, Welcome to GreenSock Forum. Please create a reduced codepen demo showing what you describe. https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Kind regards Mikel
    1 point
  12. Thanks @Jonathan! The "SVG Gotchas section" is such a helpful resource, thank you for all your help there. I've read through it numerous times and I did try the AttrPlugin, but I couldn't figure out how to first access the cloned node's children individually, to apply the animation to, lol. After more research I've come to the conclusion that we can't reliably access the shadow dom. A couple of years ago I was messing around with the webkit pseudo elements which are in the shadow dom, but they are specifically earmarked so it's not the same thing. The shadowroot spec is interesting, but only Chrome seems to support it so far. It's unrelated, but at one point I found an interesting side effect where you can control all the <use> clones simultaneously by animating the <symbol> directly, as demonstrated in this pen: Anyway thanks for all your help!
    1 point
  13. If you console log children of clone parent, you will see it only returns one child element. It basically confirms that you can't access shadow root, there maybe way but I don't know.
    1 point
  14. Hello @mr.x and Welcome to the GreenSock Forum! The issue is that SVG child elements <symbol> or <defs> element are not directly rendered in the DOM. So they are removed from the browser render tree. But that is part of the SVG spec so it is not advised to try to animate CSS with graphical elements inside a <defs> or <symbol> element, since they wont visually animate! SVG <symbol> spec: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol Note that a symbol element itself is not rendered. Please see this for more info on why https://greensock.com/forums/topic/13681-svg-gotchas/?do=findComment&comment=57408: Better to access the attributes and animate them, or use the GSAP AttrPlugin for this. This is regarding animating SVG elements within an SVG <defs> tag. If you are trying to animate elements within an SVG <defs> element, then you should use the GSAP AttrPlugin. If your SVG elements are not within a SVG <defs>, <symbol>, or <mask> element .. than you should use the GSAP CSSPlugin like your already doing! Which is the default when tweening CSS properties in GSAP. GSAP is smart enough to know when to use what. But for attributes, wrap your attributes in the attr:{} object when using the GSAP AttrPlugin If you are animating SVG elements and they are nested inside a SVG <defs> element. then you need to animate those nested graphical elements with the GSAP AttrPlugin, instead of the GSAP CSSPlugin. The reason being is that Firefox will honor the SVG spec and will follow web standards whereas webkit browsers like Google Chrome and Apple Safari will allow certain non-standards and non-spec behavior. But will later remove that non-standards and non-spec behavior to line up with the spec, further confusing users / developers. SVG Graphics elements are considered the folllowing: <circle>, <ellipse>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <use> That is why i always debug and test in Firefox first knowing the expected behavior will line up with the spec, in this case the SVG spec. And then i debug webkit (Chrome and Safari), followed by debugging IE. Doing it that way I guarantee that HTML, DOM and SVG elements will behave according to the web standards, the spec, and cross browser. CSS is not directly rendered inside a SVG <defs> or <symbol> element. That is why using the GSAP AttrPlugin works, since it animates the attribute values directly. Taken from SVG spec on the MDN (Mozilla Developer Network) website. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs <defs> SVG allows graphical objects to be defined for later reuse. It is recommended that, wherever possible, referenced elements be defined inside of a defs element. Defining these elements inside of a defs element promotes understandability of the SVG content and thus promotes accessibility. Graphical elements defined in a defs will not be directly rendered. You can use a <use> element to render those elements wherever you want on the viewport. The same goes for the nested elements within an SVG <symbol> element. So as rule of thumb when animating SVG, if the element your animating is within a SVG <defs> or <symbol> element , then please use the GSAP AttrPlugin. But if it is not nested inside a <defs> or <symbol> element, then you can use GSAP as usual, knowing that it will use the CSSPlugin instead. You could access the Shadow DOM with web components but its not really ready for prime time. Happy Tweening
    1 point
  15. Oh, it's great Jack ! Thank you for this quick and very helpful answer. I would never have thought to adjust the autoAlpha to 0.99, incredible. On the latest version of firefox, it actually works with your tips. On IE, you must also disable the css "transform-style: preserve-3d;". A big thank-you.
    1 point
  16. Here is the demo where you can use relative width.
    1 point
  17. Hi and welcome to the GreenSock forums, I dug around and think I found the effect you were mentioning https://ueno.co/about I think what you are referring to is edgeResistance like how the pictures bounce back when you drag too far. By setting the minX and maxX bounds on the Draggable we can tell it how far it can be dragged. Here is a small demo I whipped together which should help Check out Draggable and Draggable Docs If you are trying to do something else, please clarify and we will do our best to help.
    1 point
  18. Trick is to set maxX to 0 and minX to viewport width minus container width. You can apply bounds on resize using applyBounds method on resize so your content can be responsive.
    1 point
  19. It can be resolved by using really tiny centered div as target and UI as trigger. Your thoughts?
    1 point
  20. Hi @mikel By scroll jacking, I'm talking about interrupting or changing the native scroll bar behavior. Much like this demo screws with your mouse. I'm not against scrolling animations or parallaxing. Quite the opposite. I actually do a lot of that stuff... but with my own scroll magic. Look at the demo Jonathan posted above. There's actually no content being scrolled, yet the scroll bar behaves normally, even with touch. If you need to do scroll jacking, just hide the scroll bar. You can get the effect you want, but without messing with user expectations. That's what a lot of the apps on GSAP's and Pixi's showcase pages do, most of which have won some type of award. A couple of the first ones I came across. Some really nice stuff! https://www.rainforestfoods.com/experience/#!/slide-intro http://jetlag.photos/ http://truthlabs.com https://moments.epic.net http://masterdigitaldesign.com/#the-master
    1 point
  21. Looks like there is some "scroll hijacking" going on there. Check out this link @Carl posted the other day. https://envato.com/blog/scroll-hijacking/ Related video...
    1 point
  22. Yes indeed, I think that most of the top web animators out there tend to code their animations rather than using a GUI (though not always, of course). I've heard from quite a few who tried various GUIs and they just feel hampered by them. They tell me that once they grasped GSAP and its API, they were much faster at cranking out animations than if they tried to do it all in a GUI. That being said, there are clearly sometimes when a GUI is better, like cartoons or something that requires character rigging or something. There are several tools that leverage GSAP under the hood, but none that I'd say rival the controls and refinement of After Effects or even Animate CC. One of the key things that'll help a lot (if/when you decide to go all-in with GSAP) is timelines and nesting them. You can modularize your code pretty easily into functions that spit back a TimelineLite or TimelineMax instance that you place into a master timeline. It makes tweaking and maintaining your complex animations much easier. I'm pretty biased, so I'll let others weigh in on their process. And again, I don't want this to come across like I'm against GUI tools - I think they're awesome and actually superior in several cases. But for a lot of what top-end web animators do on a day-to-day basis, hand-coding GSAP animations may be a better/faster route. I'd love to hear about your experience as you go. If there's anything we can do to make your life easier, we want to hear about it.
    1 point
  23. It's hard to figure out where something is with multiple transforms applied to it. That's why I was disappointed to see the getTransformToElement method removed in Chrome 48. http://greensock.com/forums/topic/13671-gettransformtoelement-removed-in-chrome-48/ And using something like the following is not always accurate with nested transforms... var x = myElement._gsTransform.x; Thankfully, the polyfill seems to work great. Notice how I can place the green circle on the top-left corner of the orange box without doing any calculations. Try doing that manually! http://codepen.io/osublake/pen/f4eb73885cf82831fcd8b30539a32901?editors=0010 This functionality is now in GSAP's MotionPathPlugin as well: https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.convertCoordinates()
    1 point
×
×
  • Create New...