Leaderboard

I shall take on the mantle and see this issue resolved! May the GODS bless me with wisdom to navigate the darkness! It will also be a very long jouney with very small steps. First step bellow.

You're a good man @Dipscom. May these brownie points motivate and nourish you on your noble quest. Safe travels my friend.

HI @francescocortese Welcome to the forum. If you're trying to skip ScrollMagic for scroll triggered animations, you may want to check out the Intersection Observer API. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API We've had a few discussions about it. Here are a couple good threads. Hopefully that helps. Happy tweening.

Thanks for the demo. Please fork it and try to reduce to the least amount of code possible necessary to replicate the issue. A simple fade in fade out shouldn't need 75 lines to reproduce. I suspect that as you reduce it you will get closer to the conflict that is causing the problem It takes too much time for a first-time viewer to look at code like TweenLite.set(clone, from); TweenLite.to(clone, 0.3, style) then try to figure out what from and style are only to find out that we then have to find what fromHero is and var from = calculatePosition(fromHero); what happens to it when it gets passed into calculatePosition I'm guessing you could create a simple demo with 15-20 lines of codes that can replicate the conditions that are causing the problem by removing a bunch of functions and hard-coding some values. If the problem is with an element fading in and out there is no need for code that makes something grow and move. I suspect that once there is a reduced and easy to read demo we will be able to find the problem fairly quickly. thanks!

Hm, I'm not entirely familiar with that hardware, but I wonder if the problem has to do with differences in the events that the browser is dispatching. Have you tried to console.log() e and e.detail to make sure it's what you're expecting? Touch-based devices can be very different. You might want to read: https://www.html5rocks.com/en/mobile/touchandmouse/ https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events

I'm not really familiar with isotope grids. In addition to what PointC suggested you may want to study the following demo from @OSUblake I think he may have a post somewhere where he goes into some the details or an updated version, but hopefully its a start.

Hi @flow561 Welcome to the forum and thanks for joining Club GreenSock. I'm not at all familiar with isotope.js, but it looks like everything in your layout is clickable <a> tags. By default Draggable will ignore clicks on <a> tags. You'd have to set dragClickables:true in your project to drag everything around. I'm not sure that's what you'll want as I'm guessing each of those img elements will be clickable in your final project, but that's what's preventing Draggable from doing anything in your pen. From the docs: dragClickables: Boolean - By default, Draggable will ignore clicks on <a>, <input> <select>,<button>, and <textarea> elements (as well as any element that has a data-clickable="true"attribute), allowing the browser's default behavior (like clicking on an input would give it focus and drop the cursor there to begin typing), but if you want Draggable to hijack those clicks and initiate dragging instead, set dragClickables:true. More info in the docs: https://greensock.com/docs/Utilities/Draggable I also noticed you had throwProps set to true in your demo, but that script was missing. Here's the CodePen link for it: <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script> Hopefully that helps a bit. Happy tweening and welcome aboard.

Note if you use the Intersection Observer it isn't natively supported on IE. There's is a pollyfill you'll probably want to include if you go that route. This may be mentioned in one of the other posts but I thought I'd toss it in in case it isn't https://github.com/w3c/IntersectionObserver/tree/master/polyfill

I think the issue is that you're tweening the opacity only after the menu has finished growing/shrinking... when you open it, it starts at 0 and then fades in once the menu is completely open; but when you close it, it starts at 1 and will only start fading out once the menu is closed. Additionally, judging by how the values move when monitoring them in the inspector, it looks like for both opening and closing transitions they tween from 0 to 1. Echoing Carl's sentiment though, a reduced example would make it way easier to understand what's going on. I think you should make just one timeline that contains both the size change of the menu and the fade in/out of the li elements. Then you'd be able to play or reverse that timeline when appropriate.

Hello @SimonWidjaja and Welcome to the GreenSock Forum! Here is a link to the video and the docs page for ExpoScaleEase: Happy Tweening

That website uses Pano2VR player and draggable on top of that to control the view. I think using draggable on top of it has to be easiest part and in forum you will find multiple examples of how to control some values using draggable. Pano2VR on the other hand will take some process of creating 3D views, 360 images etc. https://ggnome.com/pano2vr

Sorry, that's beyond the scope of what these forums are meant to address. We really try to stay focused on GSAP-specific questions. @OSUblake may have some suggestions for you (he does crazy complex/fun stuff regularly, but no guarantees. Good luck with the project!

@smallio plan is to make you fly, be it as superhero or as parrot.

It all started with this thread, that will give you some idea about entire effect. Carl has covered it in all details in latest video on GreenSock learning channel on YouTube. Blake might follow up with some more explanation, I am also curious about any alternate use cases for ExpoScaleEase.

I'm not sure I understand the problem however... If you mean this pen, there is a 0.5s delay on the text animation. If that's what you're refering to, remove it and it will fire at the same time as the silde animation. Though I think you may mean something else as this has nothing specifically to do with IE.

Hello, Yes! I viewed that post and I learned a lot! What my purpose/goal is: Create really cool 3D web graphics and animations. I want to learn WebGl and Greensock. What I learned from the form which was sent: Before learning WebGL/fully focus on GSAP: 1. Learn/get better at Core JavaScript especially ES6 because class syntax is much cleaner than regular OOP Inheritance approach so I'm following this: https://codepen.io/osublake/pen/44fd943b80c95bb48a030410f9b8f91b?editors=0010 https://codepen.io/osublake/pen/d14328e8948d2c55d92b666e5c7a73de?editors=0010 Plus other online sources but full practice of classes. I was before trying to learn what functional programming is but ES6 class syntax is what I'll focus on first then learn other approaches when I get good at classes. 2. Improve on the Math: https://www.amazon.ca/Foundation-HTML5-Animation-JavaScript-Lamberta/dp/1430236655/ref=sr_1_1?ie=UTF8&qid=1519763836&sr=8-1&keywords=Foundation+HTML5+Animation+with+JavaScript 3. Watch videos of other code from pros like: https://www.youtube.com/watch?time_continue=5&v=8aGhZQkoFbQ 4. Learn from forums like GSAP I've scheduled my work schedule so I can work 4 days a week and rest 2 days focus on JS and Math. Conclusion, Work hard, don't give up, and keep coding. Have questions then message this great forum. Thank you! *if I'm missing anything please advice me. Very grateful for this forum!*

This might be a job for three.js. https://threejs.org I think you could rotate a jpeg on a plane to achieve it to a certain degree but it would still be a flat image so it wouldn't have the same effect, the example you show looks like a 3d model. Beyond my pay grade on this forum though sounds like something for Blake or one of the other big guns.

Dear GSAP Magicans, you were right: My mind was blown when I saw your ExpoScaleEase Demo today (Link: https://codepen.io/GreenSock/pen/NyXBbV?editors=1010 ). Can you please share some more hints how to create/prepare the asset/image fragments for this kind of animations?! E.g. coming from Photoshop or Illustrator. That what be super awesome. Thanks in advance and keep up the amazing work! --Simon

Yep - when you want a smooth, repeating rotation like that just use ease:Linear.easeNone and you'll be all set. Have fun and happy tweening.

Thank you so much. I see you've also smoothen the bicycle tire's rotation, I was looking for that. Once again thank you

Sure, you can check the reversed() value, but keep in mind that tweens/timelines can be nested as deeply as you want, so it can get a little tricky. If you've got a reversed timeline inside a reversed timeline, it's technically reversed but it'll APPEAR to play forward (because its parent timeline is reversed). Also, you can have a paused timeline whose playhead is being tweened by that ANOTHER tween (forward or backward). So in that case, it wouldn't even matter what the reversed() method returns. See what I mean? There are ways to get the value you want - it just depends on your scenario. Simplistic is just use the reversed() method, but if you've got the potential of any of those other scenarios, you could walk up the ancestor timelines and figure out the value accordingly or use an onUpdate to track direction. Lots of options.

Great job, Dipscom. Looking forward to following along.

Wow that was fast! Thanks a lot. I will dive deeper ...

Dude, duuuuuuuuude! Blake, you are such a fountain of knowledge. The scale/counter-scale method is precisely what I was looking to achieve, and you even preempted my headaches with will-change. Thank you yet again for the insight and the links to other resources. You are one of the main reasons this community is so incredible.

I feel like I'm a parrot at this stage just repeating thank you to some of you guys, but seriously, THANK YOU!!! You don't even know how much I appreciate the contributions. Things like this can take hours for a noob like me to figure out & being able to see stuff like this is totally invaluable. Gratz on mod status & Superhero as well btw.

My gut says this is a delay (in IE) with the handoff of the scroll event from the window to the overflowed container. I'm not entirely sure of that, but I would suspect it.

Everyone makes mistakes and writes too much code when they start their coding journey. Practice and time will make you better at it. Most everything I know has been learned by hanging around the forum and answering questions. There are a lot of great people around here that will help you with GSAP problems and questions as you progress. @Sahil just made it to Superhero status. His new post may give you some encouragement too. Happy tweening.

If you want it to be fancy, when going eg. from 20km to 20m, you could make it tween down to 1 and have an onComplete callback that changes "km" to "m" and starts a new tween from 1000 to 20 edit: I just realised I invented "km" ! oh well, the logic still works with m and k

That's happening because you are declaring your menuOpen variable inside your menuToggle() function. Each time you click the menu button it sets the value to false. // please move this outside of your menuToggle() function let menuOpen = false; Happy tweening.

Right – as I thought, this is a bit more complex than just rotating two independent elements. I'm not going to make a full demo as it would require more time than I have, but unless you can just rotate each wheel and work with opacity to achieve the effect you want, I think you want many individual parts rotating around one of the centers (depending on what key you're pressing); and you'd save where everything is after each rotation, so that you know what to target next time. In the pen, I'm using classes to do just that. Here's a quick example, hopefully you can figure out the rest Also, I don't know if this is a trend or what (it happened to Sahil just a few days ago), but there is no need to send private messages to people to say you posted something in the thread. Users receive notifications by default when new content appears in a thread they've participated in, and if they turned off those notifications they probably don't want to receive messages. This forum is a source of voluntary help and personally any private message I get makes me less willing to contribute to a thread, not more...

@lisartur You haven't provided us enough information to help you with what kind of effect you are trying to achieve, neither there is any new information in your PM. The code I have posted can work with any images/svg elements/html elements, it doesn't matter if it is circle or rectangle. Also the way you have posted your images they don't look like they are rotating. You can fork my demo and post an updated demo with your html/svg/images. Though keep in mind that games are already complicated thing to do, so we can't really spend a lot of time to help you implement something complex. If you have prior experience with JavaScript and game development we can help you with how certain specific effects can be achieved with GSAP.

If you open the console, you'll see a 'Cannot tween a null target' error. // switch this tlMenu .addLabel('menu-open') .set(this.menu, {className:'+=is-animating'}) .to(this.menu, 1, {opacity: .98, autoAlpha: 1, ease: Power4.easeInOut}, 'menu-open') .to(this.ctaLinks, 1, {color: 'black', ease: Power4.easeOut}, 'menu-open') .to(this.hamburger, 1, {stroke: 'black', ease: Power4.easeOut}, 'menu-open') .set(this.menu, {className:'-=is-animating'}); // to this tlMenu .addLabel('menu-open') .set(menu, {className:'+=is-animating'}) .to(menu, 1, {opacity: .98, autoAlpha: 1, ease: Power4.easeInOut}, 'menu-open') .to(ctaLinks, 1, {color: 'black', ease: Power4.easeOut}, 'menu-open') .to(hamburger, 1, {stroke: 'black', ease: Power4.easeOut}, 'menu-open') .set(menu, {className:'-=is-animating'}); Once I made that change, all the errors went away. Happy tweening.

@harp It will be nice if you make habit of posting codepen demos where we can check working code. It is too hard and time consuming to debug anything just by reading code.

Yeah, using canvas requires a little bit of setup. Another option would be scaling an outer element, and apply a counter scale to an image. It would at least perform better than animating width and height. One problem is that scaling in Chrome can be rather difficult due to bugs in will-change CSS property. This is all done using scaling. That's based on some stuff from this thread.

Those are excellent suggestions from @Sahil If you want full control over the timing and ease of playing through a segment of a path animation you can put your animations in a TimlineMax and use tweenFromTo() like: var black = new TimelineMax() black.to("#black", 5, { bezier: { values: bezier, type: "cubic" }, ease: "linear" }); var red = new TimelineMax() red.to("#red", 5, { bezier: { values: bezier, type: "cubic" }, ease: "linear" }) //tweenFromTo(startTimeOrLabel, endTimeOrLabel, {vars}) red.tweenFromTo(red.duration() * 0.5, 0, {repeat:-1, yoyo:true, repeatDelay:0.2, ease:Power2.easeInOut}); black.tweenFromTo(black.duration() * 0.5, black.duration(), {repeat:-1, yoyo:true, repeatDelay:0.2, ease:Power2.easeInOut}); Read TimelineMax.tweenFromTo() docs

RE: @b-xb 's psuedo code, Here is a CodePen with that idea in action for anyone who comes across this like I did. http://codepen.io/sheriffderek/pen/VPVoVa

Working with grids can be hard. Try making a Tetris game. How do you go about figuring out where are all the blocks are? I bet a lot of people would try to calculate the distances. I'm sure you could do it that way, but it would probably be a lot of work. A better way would be to create an abstraction of the game board, and work with that instead of the DOM. A two-dimensional array is an excellent abstraction when working with grids. Now we can easily tell where everything is. I created a similar abstraction with my sortable grid. Every tile is represented by a simple unit. A normal sized tile is 1, and a wide tile is 2. If a row can hold 4 units, and there are 5 units in the row, I can easily tell that it's in overflow and send that tile down to the next row. This is all done before updating the layout visually. When using Draggable, it doesn't decide how to lay things out. It just tells the model to update the layout when a certain condition is met. The model for your grid is real easy to update. All you have to do is shift an array like this. // Moves a row left or column up data.push(data.shift()); // Moves a row right or column down data.unshift(data.pop()); Once you update the model, you can then update the view. To update the view all you have to do is loop through your model, and append the current element. Everything will be in the correct order! To animate it, all you need to do is a simple relative animation. This animates an element right. tl.fromTo(cell, 0.5, { xPercent: "-=100" }, { xPercent: 0 }); I didn't get a chance to add any Draggable stuff, but you can see how works. If you wanted to keep entire grid area full, you could add clones to empty the area. http://codepen.io/osublake/pen/979176f145bfe526bcbc45a9f6adc804?editors=0010