Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 03/08/2018 in all areas

  1. Hello @Stagnax and Welcome to the GreenSock Forum! There are many reasons why you still see the black background. I don't see any canvas elements being used in your example, even though i see canvas.js being loaded. Your body tag has a background of black, but your #c1 and #c2 child elements do not take up the full space of the viewport. In this case each child (#c1 and #c2) positions should be half of the viewport for each. 50% or using viewport units (vw) Overflow: hidden would not do anything in your case since your background is black. And you are rotating elements with a fixed width percentage and height, so there you will see the <body> background color regardless. I think you mean to rotate and have the red and blue boxes be extended past the viewport, so when rotated you don't see the black background on the body tag. Because when you view your codepen on a larger screen that is 1080p, you will also see the black body background on both right and left sides. So you will need to fix your initial HTML markup to account for when its rotated taking up half the screen for each blue and red box. Your better off just creating an additional parent wrapper and not rely on the body tag as your main background element. z-index wont do anything unless the element has position absolute, fixed, or relative. You should first layout the page the way you want with the initial CSS and then animating will be much easier to achieve. Just my two cents. Happy Tweening!
    5 points
  2. Just a quicky demo of what I think you're asking. It's very basic, with no snapping or throw props. Scaling everything down, and keeping an image centered over the cursor will require some work. Probably easier to do with canvas where it's much easier to change where something is drawn. Same with SVG as GSAP has the smoothOrigin option.
    5 points
  3. Canvas elements have inline-block style by default, following article will explain what is happening. https://css-tricks.com/fighting-the-space-between-inline-block-elements/ Though it feels like you are confusing canvas elements. They are used to draw on them, you are trying to use canvas elements as normal HTML elements.
    5 points
  4. The jitter is probably caused by your touchpad. They are usually very sensitive, so simply removing your finger from it could be triggering a scroll. And "DOMMouseScroll" is not a standard event. https://developer.mozilla.org/en-US/docs/Web/Events/DOMMouseScroll Consider using "wheel" instead. See the example towards the bottom of this page if you want to include behavior for old browsers. https://developer.mozilla.org/en-US/docs/Web/Events/wheel
    5 points
  5. Hey @smallio That's happening because you draw it from nothing (0,0) to (0,100) on mouseenter. Then on mouseleave you draw it from (0,100) to (100,100) so the beginning of the line is at the end for subsequent rollovers. (It draws from (100,100) to (0,100)) There would be a few ways to get the effect you're after. I think a simple approach would be to use a fromTo() tween instead of .to() tweens. Something like this maybe. That will cause some harsh jumps with rapid hovering so you could also just create a timeline and play()/reverse() on hover as well. Hopefully that helps. Happy tweening.
    5 points
  6. Hi zadvorksi, Thanks for the clear demo. The demo and thread Sahil referenced are great and should shed some light on how things work. However, if you need more info on the what, why, how, just let us know. In the meantime I'm going to take this opportunity to promote your work https://codepen.io/zadvorsky/ to the others as I'm a bit of a fan. Carl
    4 points
  7. lol @Sahil you're a master... brilliant work
    4 points
  8. @smallio - I'd echo @Carl & @Sahil's thoughts about whether this is worth the complexity to make it happen. I really like @Sahil's demo, but with rapid hovering you can see that the line will sometimes be drawn in reverse. Whether a user would do rapid hovering, I don't know. For these types of mouseover animations I almost always use a timeline that will play/reverse so rapid hovers aren't an issue. It may not be quite as cool as drawing on and then off, but it will save you some headaches. Just my two cents. Happy tweening.
    4 points
  9. @smallio To me following implementation makes more sense if you don't want to get do a lot of Math. As for to complete circle from current position, it is going to take a lot of calculations to determine angle etc. Also, you should either use mouseenter and mouseleave or mouseover and mouseout. Though keep in mind they behave differently, usually mousenter/mouseleave does the job.
    4 points
  10. I understand @Sahil. That is why anytime I use the <canvas> tag the first thing i do is set display block on it in my CSS to override the browser defined style sheet. Good thing you let others know who did not know of this
    4 points
  11. Nice job figuring it out I don't know what your project looks like, but I feel like you could just have two separate timelines, and give paused: true to the second one. But maybe it's easier for you to have everything in only one timeline!
    4 points
  12. He changed his demo and replaced canvas tags with divs, he just had to set display block on canvas elements. But probably no one will understand what I am talking about. @Stagnax That's why you should never edit posted demo, if you want to make changes just fork your original demo and make changes to it. It keeps forum organized and gives any new reader exact idea about what was the conversation about.
    4 points
  13. 4 points
  14. Thanks for the simple demo. Very helpful. Good news: I know why it wasn't doing what you want Bad news: I'm seeing a bit of a glitch that I can't explain at the moment. So it wasn't playing the same way after you enter and leave once because the end of the "leave" animation was not the same as the start of the "enter" animation. When you demo loads you set drawSVG:0% When you first mouseenter you are tweening from drawSVG:0 to drawSVG:"100% 0%" When you first mouseleave you tween to drawSVG:"100% 100%" So now the next time you mouseenter you are not starting at drawSVG:0% as you were the first time you are starting at 100% 100% which is much different. The solution is to make sure you mouseenter always starts at 0 and goes to 100 100. you can do that with s.mouseover(function(){ TweenMax.fromTo(c ,0.5, {drawSVG:'0%'}, {drawSVG:'0% 100%', stroke:'#fff', ease:Power1.easeInOut}) }); My demo is below and I'm curious to see what @PointC just posted before me:)
    4 points
  15. For E, F, G, H, I and J you need to change the transformOrigin parameter so that it is at the center of the other circle. Here are a few examples: If you set transformOrigin to 50% 50%, that is the center of the element itself. If you then rotate the element it will rotate around its center, i.e stay in the same position. If you set tO to 100% 100%, that is the bottom-right corner (100% of the element's width, 100% of its height). If you rotate it by 90°, it will move around its bottom-right corner, so it will end up at a position that is below and to the right of where it was initially. If you set tO to -200% 50%, that's a point that is very much to the left of the element (2 times its width to the left), but aligned with the element vertically (half its height). If you rotate it by 90°, it will end up way below and way to the left. You should try making a codepen and applying these transforms to an element via CSS, to see how they work. When you understand this correctly, you can deduce what values to use for your project. Going back to the solution above, if we take A as a starting position, the transform origin for the small circle is 100% 100% because the center of the circle is on the bottom right corner of A. The transform origin for the big circle is something like -200% 100%, ie. way to the left of A and aligned with its bottom side. In your code example, it didn't work because you kept all the transform origins at 100% 0%.
    4 points
  16. OK. I understand what you want now. I think you might be able to do that with the lagSmoothing feature. https://greensock.com/docs/TweenLite/static.lagSmoothing() And I just saw your deleted post about manually stepping the ticker. @GreenSock that's actually a feature a lot of game developers want. They want their game loop to drive everything. Something worth considering for GSAP v2.
    3 points
  17. Are you trying to get a delta time of 0.5, or do you want it to be based on the elapsed time? Here's a simple example of a ticker, which could be adapted to work with GSAP's ticker. var targetFPMS = 60 / 1000; var maxElapsedMS = 100; var lastTime = -1; var elapsedMS = -1; var deltaTime = 1; var speed = 1; requestAnimationFrame(onFrame); function onFrame(currentTime) { elapsedMS = currentTime - lastTime; deltaTime = elapsedMS * targetFPMS * speed; if (elapsedMS > maxElapsedMS) { elapsedMS = maxElapsedMS; } // Do your delta time stuff lastTime = currentTime; requestAnimationFrame(onFrame); }
    3 points
  18. @zadvorski It gets tricky because GSAP mainly is for animation and works with time even if it is tiny fraction it will work. We ran into similar question once and I had to create my own question on this topic, where you can find more detailed explanation. You can get around it by adding tiny fraction of time as following demo. Also, please avoid posting private demos as we can't fork them.
    3 points
  19. Ah, yes, mouseenter seems to work fine. Doh. You are exactly right. Mystery solved
    3 points
  20. hmmmm... I see that in your demo now. If you switch the listener to mouseenter instead of mouseover, it seems fine to me. Since mouseover fires over the child elements too, I think it's triggering twice.
    3 points
  21. Yep - as @OSUblake and @Acccent suggested - two timelines would probably be a better choice in this case. That's where I was heading in my advice to you in your other thread with this issue, but there was no demo available so I wasn't really sure what you were trying to do. That's another reason we need demos to offer the best assistance. Happy tweening.
    3 points
  22. There's nothing wrong with having multiple timelines. If I have to spend more than 2 brain cycles figuring out how to make a sub-timeline work with a master timeline, I'll leave it as a separate timeline and move on.
    3 points
  23. Here you go. I show some of the trig used for this here. And how to get mouse coordinates inside an SVG here.
    3 points
  24. ScrollMagic is good for one thing, and one thing only, triggering animations based on a scroll position. It is not ideal for anything that involves animating scroll behavior because then it would be working against its own logic. Here's the ScrollMagic library reduced to 44 lines of code. Yes, it's just a fancy way of creating a timeline
    3 points
  25. Ah, very interesting - after a few hours of digging, it looks like IE10 is incorrectly reporting the getBoundingClientRect() values for the documentElement and body. I believe I've figured out a workaround, though, and dropped it into this [uncompressed] version: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollToPlugin-latest-beta.js Does that work better for you?
    3 points
  26. Nice work @Sahil!!! I've been using that book since 2012, so that's where a lot my animation know-how comes from. The book was originally written by Keith Peters, who also does the Coding Math series on YouTube. https://www.youtube.com/user/codingmath/videos
    3 points
  27. I don't know if this will help with a dolly zoom as that also deals with camera distance, but now that you brought it up, I'd like to make a dolly zoom demo. @SimonWidjaja For assets, check out some of these images. I didn't make them, but you can see how they relate to each other. The are 3 in each set... https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/zoom-ozora-1.jpg Just keep changing the number on the end. The final image is 42.
    3 points
  28. What if... set first the default color of the background and tween it with black after the tween animation done. If you don't understand, what I mean is set it first as white background and don't set it on the css make it on the javascript. After the animation has been done then put a trigger to call the tween for the black background to appear. Doest it make sense?
    2 points
  29. I wonder if perhaps you're looking for GSAP's lagSmoothing() feature? https://greensock.com/docs/TweenLite/static.lagSmoothing()
    2 points
  30. There is also this, which may provide some assistance ( kind of outdated however, from 5 years ago ) "Add Overflow Scroll Effect (Bounce/Glow) like on iOS/Android but for your website" https://github.com/peachananr/fancy-scroll
    2 points
  31. Okay okay. So, in this case its best to just have two separate timelines without connection to master(no need for master)? Thank you. Learning a lot! Very passionate about this stuff so everyones guidance really means a lot and because of it I'm improving.
    2 points
  32. @smallio yes you can force it to complete the full circle and use an onComplete callback but then you have to consider what will happen if they mouseenter againg quickly while the mouseleave animation is playing. Are you going to wait for that to finish as well. I think whatever you want to do is all possible, you just have to see if its worth all the additional complexity. Also, if the animation doesn't appear to respond exactly to user interaction it could give the user the impression things aren't working properly. @PointC Yeah, you're slow version definitely shows how I would expect things to work in all scenarions (cool). But I still think something is amiss, perhaps even a rendering glitch. I recorded my demo above at the current speed but edited the video to play at half speed. When I mouseleave even when the drawSVG value is something like "0% 75%" the stroke appears to shrink down to a hairline fragment and I'm not sure the end of the stroke segment should really go back to being that close to the beginning of the segment. Give it a look here: https://greensock.d.pr/O8ucad
    2 points
  33. This is a huge help, @Sahil! Thanks so much for taking the time. I think the two .play() methods, in normal javascript and GSAP, were a particular sticking point; I didn't know about javascript .play() and thought I could just use GSAP .play() to trigger the video. And the querySelector is obviously important too. Thanks again!
    2 points
  34. When you see me do that, it's because I'm not actually dragging anything. I'm just using draggable to initiate events. Notice how the proxy isn't even in the DOM/HTML. I'm converting the movement to the $holder element in the drag event. And that's a really rough demo as I wasn't exactly sure if that's what you are trying to do.
    2 points
  35. Hehe. I've been wondering how smoothOrigin is going to work once 3d gets added to SVG spec. I'm sure the demand for smoothOrigin in HTML is there, but I'm guessing there's a potentially bigger performance penalty. In HTML, transform origin is based on the element. In SVG it's based on the 0,0 coordinate of the parent SVG element, which simplifies some stuff. And in HTML there isn't a nice equivalent of getBBox, which further complicates things. And then you have 3d. I'm not sure how smoothOrigin would work for the z-axis Maybe Jack can further expand on the complications as I really haven't looked into it. I just know it works, and it's a great idea.
    2 points
  36. That's a problem every developer faces. How to avoid spaghetti code, and there is no easy answer. I think learning how to structure stuff like a game is really helpful. I would also look at how frameworks like React and Vue structure stuff into components. Creating logical grouping of the stuff you are working with can go a long away.
    2 points
  37. Hi @OSUblake, Thank you for the examples and thread. One thing that I'd like to know is , and I am basically referring to JavaScript is , how do i not get tangled in creating a certain animation or achieving a certain effect or complex logical method with the overwhelming amount of resources found online as I learn everything form the web. (I've read the links you've just sent me and I noticed creating small games can really help in building logic , so I am starting to do that)
    2 points
  38. Thanks for the demo. I don't understand what you mean by leak of the background or "black ground". Kind of confused. Is your question related to something that GSAP isn't doing properly or the layout with your html and css?
    2 points
  39. Looks good! The term "dirty" has a lot of meanings in programming, but I was using it to describe objects that have changes made to them that you didn't account for. You're reusing objects, but you weren't correctly resetting all the previous changes made to those objects, so I said they were dirty. In certain cases you were using values carried over from a previous run, which was causing problems. It's been awhile since I looked at your code, and I don't know if you've fixed the problem, but I think the problem was happening somewhere in the if statement starting on line 185 of your v.005 demo. In the else part, some reused objects weren't being correctly reset. It didn't happen every time, just under a certain condition, which I really can't remember. // If I remember correctly, there was a logic problem somewhere in here if ( setSpeed === true ) { ... } else { ... }
    2 points
  40. Hi cmm, Thanks for your strong vote of confidence in GreenSock's tools. Whether or not we should do a scrolling tool comes up periodically, but at the moment we're focused on a bunch of other higher priority features for the platform. Building a tool like ScrollMagic would require lots of dev time and an inordinate amount of additional support, so its not something that we can just "knock out" in a few weeks. It would require a substantial commitment of resources long-term. Totally appreciate the suggestion. The more we hear these things the more it moves the needle forward. As smallio suggested, ScrollMagic is pretty much the most robust solution out there with strong documentation and examples. Although I don't use it myself, the majority of fancy scroll sites that are in our showcase use it with great success.
    2 points
  41. @Carl - o.k. I guess I'm not crazy. I saw that weird little glitch too. I thought maybe I was seeing things. That's why I cheated a bit with forcing the fromTo() on mouseleave. Not an ideal solution, but I was typing fast.
    2 points
  42. Yup. Email filters. Canvas related questions are always more interesting to me.
    2 points
  43. As far as I can see from the code, your tlMaster timeline is not paused so that will just start playing automatically. Are you sure your button click handler is working correctly? I'm really not sure what to tell you. As we've mentioned in your other threads, it is so hard to offer assistance by just looking at pasted code without a demo. It doesn't have to be your actual project. In fact, it's preferable that it isn't. We're only looking for just enough code to demonstrate the problem or question. Some plain divs and minimal code like I used in my demo would be great. I'll put it here again for you so you can see that everything works fine playing at a label. Please feel free to fork this demo and make some changes so it's more like your project. Thanks.
    2 points
  44. Well, technically you could just invalidate() the timeline/tween to force it to re-record all the starting/ending values on the next tick, but you could also just create a new tween each time and simplify it like: $(window).on("resize", function() { TweenMax.to(elem, 1, {y:$(window).height() / 100 * 50}); });
    2 points
  45. @kpiraro Sorry for the confusion, I didn't remove unwanted code in my demo. I have commented out everything that wasn't necessary. And following is cleaned up demo. Usually in timeline you use to, from, fromTo, staggerTo, staggerFrom, staggerFromTo to animate anything. The call method gives you opportunity to call any function that will execute normal javascript i.e. non-GSAP stuff. So in this case when first two tweens are done animating the call method calls playVideo function. And inside the function I am using general method to play video. Docs seem to be inaccessible at the moment so I can't post any links but you should visit docs for more details about call method. Hope this clarifies, but feel free to ask any questions if you have anymore doubts.
    2 points
  46. @Visual-Q @Acccent You can do that by taking this approach in @OSUblake's demo in following thread.
    2 points
×
×
  • Create New...