Jump to content
Search Community

Leaderboard

Popular Content

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

  1. I think something like this would work: return Math.floor(Math.abs(i - (boxes.length - 1) / 2)) * 0.25; @Visual-Q it doesn't look like the formula you're using delivered the results @PointC was looking for, unless I'm misunderstanding.
    5 points
  2. Would you please provide a reduced test case in codepen that demonstrates the issue? I'd like to help, but it's tough to diagnose by just looking at a code screenshot.
    3 points
  3. Yep - that's exactly what we did for this project. For anyone following along now or in the future, this conversation/project continued in this thread.
    3 points
  4. Mikel provided a solid answer, but I think you may have been describing something else. Unfortunately, without seeing the full code or a demo we have to take a few guesses here. You mentioned your functions contain timelines. Is drawLogo a function or a timeline? Assuming its a function you will need to make sure: that drawLogo() logo returns a timeline that when you build your master timeline you are adding the timeline that drawLogo() returns, not the drawlogo function. I'm guessing you want something like function green() { var tl = new TimelineLite(); tl.to(".green", 0.3, {y:50}) return tl; } function orange() { var tl = new TimelineLite(); tl.to(".orange", 0.3, {y:50}) return tl; } var master = new TimelineMax({repeat:2}); master.add(green());//add the timeline that green() returns master.add(orange());//add the timeline that orange() returns with that setup you can control master however you like master.restart(), master.reverse() etc. Please read and watch the videos at: https://css-tricks.com/writing-smarter-animation-code/ particularly the part Use functions to create and return timelines. I think you'll find it super helpful. Please consider providing a demo next time. It makes things easier for all. Happy Tweening!
    3 points
  5. The waark site appears to use a dom element that is the size of the window and loads all animated elements into it. Just a guess but because the content is the size of the viewport the document does not actually scroll it is likely using an event listener to activate animation using deltaY. See: https://www.w3schools.com/jsref/event_wheel_deltay.asp https://www.sitepoint.com/html5-javascript-mouse-wheel/ https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaY With wheel events you can trigger animations with deltaY changes. Setup the container 100% high and wide with overflow hidden then you can place all animation content inside it and show hide and animate it to the deltaY changes.
    3 points
  6. You can just set a repeat count to whatever you like. ( -1 will repeat infinitely ) var master = new TimelineMax({delay:transitionDuration + showDuration, repeat:-1}); Happy tweening.
    3 points
  7. Hi and welcome to the GreenSock forums, GSAP doesn't natively do anything to output MP4 video, but there are a few tools out there that can scrape the rendered frames and create a video. This thread here is a good start, be sure to click on the links to other threads and demos
    3 points
  8. Hey everyone, I was staggering some elements from the middle by using cycle and a delay function. Diaco showed me this formula a couple years ago. return Math.abs(Math.floor(yourElements.length / 2) - i) * 0.25; This works great for an odd number of elements, but with an even number of elements the middle two should start at the same time so this function doesn't work correctly. I came up with a new formula for an even number of elements. return Math.floor(Math.abs(yourElements.length / 2 - 0.1 - i)) * 0.25; That seems to work just fine. I'm just using the modulus operator to figure if the element list length is odd or even and then using the appropriate formula to return the correct value. My question is can anyone think of a way to calculate it with one formula whether it's odd or even? I'm thinking I'm gonna need two different formulas which is no big deal, but wanted to make sure I'm not missing something obvious here. Happy tweening.
    2 points
  9. Hey @smallio We haven't seen you in a few weeks. Coincidentally, I just made a demo for another thread that does what you need here. (I think it's what you need anyway). https://codepen.io/PointC/pen/rZZGRj Does that help or am I misunderstanding the desired outcome here? Happy tweening.
    2 points
  10. Looks like they are using GSAP for their animation engine. For the 3D part of it they are using Three.js. https://threejs.org/ Happy tweening.
    2 points
  11. Yeah I know it didn't solve the initial problem but it did produce an interesting variation with cycle staggering left right out from center as opposed to symmetrically selecting pairs which I thought was kind of cool. Though with testing I note I have to adjust the number you are dividing by if the number of boxes changes.
    2 points
  12. Perfect! That's the secret recipe I was looking for. Made with 7 GreenSock herbs and spices. Thanks Jack.
    2 points
  13. Hi @ainsley_clark, After master played, you can use this method (see docs): myAnimation.reversed( true ); //sets the orientation to reversed myAnimation.reversed( !myAnimation.reversed() ); //toggles the orientation Click the green square: Best regards Mikel
    2 points
  14. I'm not sure I totally understand your question, but it looks to me like the appropriate thing to do would be to apply those class changes INSIDE the main timeline that has the other movement animations so that they're perfectly synchronized. You could do it with className tweens or with callbacks or whatever.
    2 points
  15. Hey Craig, I'm waiting for the smart folks to show up Love all the demos and the clear progression. I remember this solution from Diaco, was one of my personal favorites. Its a great effect.
    2 points
  16. Interesting approach, but it's pretty easy to do an isometric projection. It's even easier to do a diametric projection. You draw stuff at 26.565 degrees instead of 30 degrees. Why would you use a weird angle like that? Simplicity. Don't think in angles. It's a 2:1 ratio. If a tile is 100 wide, then its height would be 50. That's how isometric computer graphics are usually drawn. https://en.wikipedia.org/wiki/Isometric_computer_graphics You define positions as row and column values in a grid. Getting the projected coordinates is done like so, where x would be the column, and y would be the row. var xCoord = (x - y) * tileWidth / 2; var yCoord = (x + y) * tileHeight / 2;
    2 points
  17. Hi, One alternative that I can think of is using Adobe After Effects with nexrender and the solution by Blake to create an MP4 video. I created a small Node app that was used in a client machine (no server, but you can easily deploy it) that basically was getting images from an AWS bucket. The idea was to create a project with two parameters, a bucket for storing the images and a flag to start the rendering process, so after all the images were uploaded the user set the state of the project from upload to render and the Node app listened to that state change, downloaded the images, and started the nexrender process. When that was completed it uploaded the video generated from After Effects. Here's the nexrender repo https://github.com/inlife/nexrender And here's a ready-bake boilerplate (this is the one used in the project I worked on): https://github.com/inlife/nexrender-boilerplate Unfortunately because of an NDA I can't share any of that code, but the nexrender setup is quite simple actually and they have some pretty good docs and the Node part of this is quite simple as well. The tricky part (that I didn't do actually) is the configuration of the AE file for creating the resulting video with the images. But is one way to automatize the whole process. Although is worth mentioning that the videos that the app I worked on, weren't based on frames, they were just some fade in/out of images with a background sound and some other effects, but again I worked only on the Node side of this so I couldn't tell you how to work on that part, so you'll have to rely on what the guys in nexrender could tell you. But perhaps there is a way to turn a bunch of frames into a video using AE. Hope this helps a little.
    2 points
  18. Hi Andikachamberlin, Welcome to the GreenSock forums. Thank you so much for your honesty and integrity, you're exactly the type of developer we love to serve. Thanks for letting us know you removed the file. Don't worry, everything is ok! Best, Carl
    2 points
  19. If you use requestAnimationFrame inside your onComplete, it should give you the space you need. requestAnimationFrame(() => { this.updateCardElements(); ... }); If you need more time, you can use TweenLite.delayedCall(). TweenLite.delayedCall(0.1, () => { this.updateCardElements(); ... });
    2 points
  20. Look at the image I posted. The x axis represents time. The y axis represents the call stack. And all those rectangles are function calls. Ideally, a call stack should not take longer than 16.67ms. Anything longer than that, and there's probably going to be some lag. Your updateCardElements method is creating a huge call stack. Here's a closer up view. You can see that all those calls are related to updating react. Each column is a card. Exactly. That's how rendering works. Changing the style of element doesn't immediately force the screen to update. The browser will try to update the screen around 60 times/second (16.67ms). See requestAnimationFrame. That's what GSAP and every other animation library uses. It will paint after the animation frame callback has executed. https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
    2 points
  21. It's looking in the declaration file for something called "all", but that doesn't exist. https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/gsap I wonder if you could do something like the index.d.ts. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/gsap/index.d.ts I can't test this at the moment, but maybe something like... declare module 'gsap/all' { export = gsap; } If that doesn't work, you could try a triple slash directive. https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html
    2 points
  22. Is that the latest version? (0.2.0 / 2018-08-27) I ask because @GreenSock made some updates to that plugin based on info in this thread about non-scaling-stroke. If you're using that latest version and still getting that error, this is above my pay-grade. We'll have to kick it to upper management. Happy tweening.
    1 point
  23. Happy to help. FWIW you can also shorten this down to a couple stagger tweens which would make adjustments much easier. Happy tweening.
    1 point
  24. Sure, here's a basic version before I added the stretchy stuff and color selector. Just a basic bubble tab slider. https://codepen.io/PointC/pen/zJVmMd If I understand what you're asking, yeah, you could have different timelines for each tab. I'd need to see a bit more of what you're doing before I can offer the best advice. Maybe you can fork my basic slider and start modifying it to your needs and we'll go from there. Happy tweening.
    1 point
  25. There would be several ways to make that happen, but IMHO the easiest way with what you have so far would be this: // even easier if they all had the same classs TweenMax.set("#one, #two, #three, #four", {xPercent:-50}); Happy tweening.
    1 point
  26. This sort of does it though the respective lefts and rights of the pairs are staggered, at the very least another option for the effect even thought it's not completely symmetrical. return Math.abs((boxes.length / 2.5) - i) * 0.25; odd even
    1 point
  27. Oh, I meant to file a bug for Chrome. https://crbug.com/wizard I didn't check, but there might already be an open issue for it. I've been noticing weird SVG rendering glitches on Chrome for the past year. https://bugs.chromium.org/p/chromium/issues/list
    1 point
  28. @OSUblake You sir are a legend! Thanks for your answer. It's cleared everything up.
    1 point
  29. I am a Muslim, so I am worried about my product in codecanyon. because I violated the license. During the development period, I got the file from the codrops that the file with the animated greensock can be used for commercial purposes, so I use it in my product. And I just found out after visiting the greensock license that is not licensed by MIT, so I apologize, I have deleted the file related to greensock, and therefore please forgive me :(. I'm just a student who doesn't have a job :(.
    1 point
  30. Here's what it looks like in the performance timeline. GSAP is correctly setting the final rotation value for the last card, and onComplete is firing at the correct time. The problem is the stack for the onComplete is massive. It took over 250ms in that recording. The browser won't paint anything until the animation frame callback has finished, so that's why the card appears to lag on the second to last frame. The browser had to wait 250ms to paint the final state of the card.
    1 point
  31. I'm not sure why I didn't think of this yesterday, but changing direction in the middle of a segment is quite easy with the progress method. When the timeline is rebuilt, we set a variable equal to the progress of the existing timeline so we can use it to set the progress of the new timeline going the other direction. The trick is quickly setting progress(1) on the new timeline before setting the temp progress if the new timeline is going backward. That way we can get all the calls to fire. Here's a revised version that will allow you to reverse in the middle of a segment. Hopefully that helps. Happy tweening.
    1 point
  32. It isn't? Then why are you having problems importing GSAP modules? ? This is at the bottom of the Draggable UMD file. I think it was written before bundling tools like webpack became popular. //export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date) I have no idea what's going on with the AOT compiler. It looks really complicated. https://angular.io/guide/aot-compiler Are you getting this error? Cannot set property _autoActivated' of undefined There's only 1 file where that would happen, but I don't know what would cause the import to fail. https://github.com/greensock/GreenSock-JS/blob/master/src/esm/TweenMax.js If you're getting that error, that means you're importing from "gsap" or "gsap/TweenMax", which I wouldn't recommend. https://greensock.com/docs/NPMUsage https://greensock.com/forums/topic/18437-import-from-gsap-vs-from-gsapall/ If tree shaking is enabled import { TweenMax, CSSPlugin } from "gsap/all"; const plugins = [CSSPlugin]; Else import "gsap/TweenMaxBase"; import "gsap/CSSPlugin"; If that doesn't work, you can add GSAP files via the scripts option inside the angular.json file. https://github.com/angular/angular-cli/wiki/stories-global-scripts
    1 point
  33. I see the lag, but what makes you think that onComplete is firing prematurely? I noticed that you're using React, and that works asynchronously, meaning updates can be an issue if you're not careful. That's why there's a .componentDidUpdate() method. But like Jack said, that should never happen. I made this demo to show the callback order and the position of the boxes. I also noticed you're using timing mechanisms like setTimeout and _.defer. That can also cause problems if you're not careful. To see what I mean, open this animation, go to another tab for like 5-10 minutes, and then go back to the animation. It's been shooting off but not animating a bunch of fireworks the whole time you were on another tab because setTimeout is not synced with animation frame updates. https://codepen.io/rachsmith/pen/YNKVxG I would recommend using TweenLite.delayedCall() instead. It's driven by GSAP's ticker, so it will keep everything synced, even if you go to another tab. https://greensock.com/docs/TweenLite/static.delayedCall()
    1 point
  34. Hi @ainsley_clark Your issue has nothing to do with GSAP. How are mouse events detected? The mouse has to be over the bounding box of the element. Your test element is listening for the events, and it doesn't have a height, which is part of the problem. If the mouse enters or leaves a child element, that event will bubble up to the test element listener. When one of the child elements rotate, the mouse might be inside the bounding box, but as it rotates more, the mouse might end up outside the box, triggering a mouse leave event. This should help you see the problem. I can position the mouse in such a way that it will infinitely play back and forth. To fix it, it might help if you give your test element a height, and set pointer-events: none; in your CSS for the children of the test element. BTW, you're not supposed to nest elements inside a heading element i.e. your h1.
    1 point
  35. Sure, happy to help. Just in case my explanation of the easing was as clear as mud, I made a quick demo for you. It has three boxes that all tween 400px on the x and they all start at the same time. You can drag the slider to control the progress of the timeline. You'll see at 50% the Linear tween is exactly at the halfway point where you would expect it to be whereas the easeIn looks like it barely started and the easeOut looks like it's about finished. Hopefully that helps a bit. As @Carl mentioned earlier in the thread, you can upgrade to Shockingly Green to start using that MorphSVG plugin in the wild. Let us know if you have any more GSAP questions. Happy tweening.
    1 point
  36. Thanks for sharing Craig. It makes me feel like one of these days all this coding stuff is just going to click in and I will be off writing really good animations and text with less worry and doubt then I have right now. In the beginning it is really hard to form questions that make sense, when basically I don't really know or understand what I am talking about. Some of your comments made me smile as in ask but then figure it out on your own and keep rolling on. My first coding is that Java Script, and I'm doing simple animations and working toward more difficult ones. Here I was smiling saying hey, this isn't so bad no math, then as the lessons increase here comes the arithmetic marching in and I said "wow" not good I really suck at math. Never could understand that stuff in school and now to learn coding I need to understand algebra. I thought this it it the end I will never learn how X & Y equal numbers, but maybe I am a bit smarter now because the way I am learning makes it all somehow make sense. Anyways, just wanted to let you know through all my rambling on, that your words have given me courage to keep going and not give up. See you around the forum!
    1 point
  37. From a cursory glance, it looks like the problem is that you're creating a timeline that has infinitely repeating animations inside of it, and then placing that timeline into a master timeline that you want to repeat. That's fine, but since the child timeline is infinitely long, the parent/master timeline will never have a chance to repeat (it never reaches the end to then start over again). You'd need to either not infinitely repeat the nested stuff, or you could just figure out where you want things to wrap/repeat in the master, and drop a callback at that spot that'd restart() it. tl.call(repeat, 20); //at the 20-second spot, restart timeline function repeat() { tl.restart(); }
    1 point
×
×
  • Create New...