Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 09/10/2018 in all areas

  1. As @mikel mentioned, you'll probably want two timelines as this animation is not a reverse() situation. One other option would be to create one timeline and then addPause() at the halfway point. Then resume() when the mouse leaves. Something like this should work. Happy tweening.
    5 points
  2. Hello @hybreeder and welcome to the GreenSock Forum! For color mouse hover text color.. this should be as simple as just positioning your elements within the anchor tag with z-index. Forking @mikel codepen of your codepen. You should wrap your anchor tag (.tbtn) text with a <span> tag Give that span CSS position: relative and z-index: 2 .t_btn span { position: relative; z-index: 2; } <a href="javascript:void(0);" class="t_btn btn_bg t_btn_about"> <span>Hover me</span> <div class="hover_overlay"></div> </a> Then: give .hover_overlay a z-index of 1. (never use negative z-index like -1, since it doesn't work cross browser, only use positive z-index values) Happy Tweening!
    4 points
  3. Hi @hybreeder, that could be something like this ... You need in this example two different timelines for enter and leave. Best regards Mikel
    3 points
  4. @mikel in keeping with the license agreement, please be sure that GSAP is only used in the ethical cloning of 100% organic chickens.
    3 points
  5. Hi @vektor, The masters voice ... But here are many ways to Rome - and out of the coop. Here is a version with clones ... in an SVG: Vote for happy chicken ... Mikel
    3 points
  6. Hi and welcome to the GreenSock forums, Yes, the site you mentioned is using the GreenSock Animation Platform. Unfortunately it would be extremely time-consuming to try to explain how all of that works, especially not knowing just how new you are to web development. There are probably a dozen or so different things going on there, each with their own varying levels of complexity. Honestly, this is a very ambitious project for a beginner. There really aren't any shortcuts to these types of things (unless you find a tutorial or demo online that provides all the code for you). Perhaps someone around here knows of a tutorial or demo that does something similar. The only thing I thought of was @Sahil's canvas tutorial that makes a bunch of elements scale and move based on their proximity to the mouse: Regardless of how closely that resembles what you need to do, it paints a nice picture of the level of complexity. If you have any specific questions about the GreenSock Animation Platform, we'll be happy to help.
    3 points
  7. The trick here is that all those SVG child elements like <g> and <rect> have x and y of 0,0. Please see this thread here in which @OSUblake explains getBBox() and provides a helper function that takes into account transforms. Its probably a bit more than you need for this, but its a great utility to have around. I used his getBBox() function to figure out the distance between the x and y of each chicken and the box using a function-based value for each chicken in a single tween. var tl = new TimelineLite(); var rectBox = getBBox(document.getElementById("box")) tl.from(".chicken", 1, { x:function(index, element){ var chickenBox = getBBox(element, true); return rectBox.x - chickenBox.x }, y:function(index, element){ var chickenBox = getBBox(element, true); console.log(chickenBox); return rectBox.y - chickenBox.y } });
    3 points
  8. Hi @vektor, Here's an option to build a centered coop for the chickens (the chickens are fitting not perfect to the viewbox !). Relative to the wrapper you can now send the chicken in the corners: Here an example for centering info Happy tweening ... Mikel
    3 points
  9. Hi and welcome to the GreenSock forums, If I understand correctly you can make the element return to its normal size without using a Timeline or a mouseout. A single TweenMax tween can repeat and go back to where it started. I used a separate yoyoEase for the return animation. I am also using a repeatDelay so you can see where the forward animation ends and the repeat (yoyo) begins. You can remove the delay and yoyoEase if you like $(".red").mouseover(function(element){ TweenMax.to(this, 1, {scale:1.5, ease:Elastic.easeOut, yoyoEase:Power2.easeOut, repeat:1, repeatDelay:0.2}) })
    2 points
  10. ?? Cheers guys, getBBox() is what I was looking for !! The cloning method is clever too, wouldn't quite translate to my real life project though The forum post on SVG gotchas about BBox was very helpful ?
    2 points
  11. Welcome to the forums, @connorv. This doesn't really sound like a GSAP problem (we try to keep these forums focused on GSAP-specific questions). What exactly do you want to show while the page is loading and the script is parsed? It seems like that's what you've got to decide and then code accordingly. For example, you could have a generic "Loading..." overlay initially that either changes to your normal overlay or simply goes away once the cookie situation is figured out. Or you could just position your <script> tag in your HTML flow so that the overlay is at the top (first in the flow), then immediately after that is the <script> that contains the cookie logic, then the rest of the HTML. I suspect that part of the problem is that you're waiting for the entire page to load, then running your JS, right? Anyway, hopefully that gets you moving in the right direction. Enjoy the tools. Happy tweening!
    2 points
  12. Yep, @PointC pointed to a useful thread that shows all the logic, but if you just want to use simple GSAP-specific code that, this should be a rough approximation: var fps = TweenLite.ticker.frame / TweenLite.ticker.time; Just remember that it'll usually be less than 60 because the "time" starts measuring the moment the JS loads, but there's typically a bunch of other tasks that the browser must do initially (like reading/parsing HTML, rendering the page, subloading other files, etc., etc.) so that first few seconds it's quite likely that there will be a lower FPS. And this technique measures the OVERALL performance, not the moment-by-moment performance. If you need something like that, use one of the techniques discussed in that other thread. Happy tweening!
    2 points
  13. I updated the docs - thanks for the reminder. As for the SVG problem, I see what you mean. Sorry about that. It'd only affect scrambleText tweens with multiple targets. Here's a revised (codepen-only) version that should have that resolved: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin.min.js - Better?
    1 point
  14. I prefer SVGs for my little icons so I'd probably do it like this. Happy tweening.
    1 point
  15. Sahil, thanks a lot for this great answer! I will try this out on Flexbox. //Devotee007
    1 point
  16. Took me about 20 minutes to figure it out when I had time. It's dead simple. Of course writing things from the beginning for a constructor is best. I have a bad habit of making everything an ID when I'm donking around on the frontend. Now I've learned about nth child selectors and other things for scaling. The following is by no means good code, but I accomplished the basic goal of just instantiating new players. I changed everything to classes and passed though a hardcoded ID. I know it gets more complex, but I get it now. I can get rid of the hardcoding with jQuery and/or getters for a database of the sprite sheets so I'm not manually pasting URLs all day etc...
    1 point
  17. I think this thread can help you. Happy tweening.
    1 point
  18. The general idea would be to build a timeline. Here is a starting point for you You may need to tweak it a bit.
    1 point
  19. Ya you can do that but working with pseudo elments in javascript is a bit more complex. For example, you can't define your rules together. You have to select them using entire string the way you defined them, for example if you defined them in CSS as '.parent .child:after' then you must use that entire string to select them. '.child:after' won't work. It gets a lot more easier to work with actual elements. Or using SVG to do animations like these. Here is same example using drawSVGPlugin, Few things to note, 1. SVG viewbox is set to '0 0 100 100' and preserveAspectRatio is set to false so svg will stretch if element's height width changes. 2. The stroke's vector effect attribute is set to 'non-scaling-stroke' so stroke won't look stretched with svg. 3. I am using extra path that gets visible when animation completes because you could see tiny gaps on the edges. It can be avoided by setting different line cap and line join. 4. SVG overflow is set to visible so stroke won't get partially hidden.
    1 point
  20. Can GSAP access an element on the Shadow DOM? I can't seem to find the syntax, I tried a bunch of things and no luck so far. I made a simple CodePen example that looks something like this (note that this is simplified for clarity): <svg> <symbol id="myShape"> <rect id="rect" width="300" height="200"/> <circle id="circle" cx="150" cy="100" r="90"/> </symbol> </svg> <svg id="cloneParent"> <use xlink:href="#myShape"/> </svg> I clone an SVG with USE, which puts it in the Shadow DOM. If you open the Developer Tools, you can see it in the shadow-root, with the 2 child nodes (#rect and #circle). Great. I can select the clone parent SVG easily (that's what's animating), but how do you select the children of the clone in the shadow content? In this case, I want to select just the child node #circle of #cloneParent. Is this possible? Thanks in advance.
    1 point
  21. 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
×
×
  • Create New...