Leaderboard

You're welcome! As for ongoing questions ... if they're pretty much related to the title of this post, then following up here is just fine. If it's a new topic altogether, it would be best to create new post with a title relevant to the question at hand. That keeps threads shorter and entirely relevant. That said, feel free to ask as many questions as you like! Someone is sure to jump in and offer help or advice. As far as ScrollMagic .. you may get some pointers, but that is not a GSAP product, so you may not get an answer specific to your issue (if you have one). Happy tweening!

I recommend using a regular input element with type="range" for this. You don't even need GSAP, really https://codepen.io/GreenSock/pen/oNNxOxR?editors=0100 If you need more control over the styling (stying default input elements across browsers can require a lot of testing/workarounds) then you could create a dummy version using divs like you did and hide the input. But this approach avoids the issue you describe above. Edit: Looks like Blake beat me by half a second

Hey folks, My buddy built an online tool for minifying and compressing banner ads. He's been working with large-scale banner campaigns for 20 years and is always looking to "solve problems with code". He showed me Itsy Banner yesterday and it pretty much blew me away. It's still in beta but ready for testing. He asked me if I knew anyone who could give feedback. I told him I know where all the pros hang out 😎 I know some of you have talked about gulp tasks you run and similar tools. Very curious to hear your thoughts on this and whether or not you've seen anything better out there. I made a very informal video highlighting what it does: Please take a few zips of your banners and drop them on http://itsybanner.com/ or just press the demo button to see a bunch of pre-made banners. Some quick notes: no special coding is required in your banner! you can optionally set up a config.js file for image compression and a bunch of other stuff got some crazy three.js + gsap banners? Throw them at it. Let's see what it can do. I don't want this to turn into a big Itsy Banner support thread... just looking for some initial feedback to help him get this thing off the ground. Hopefully even in beta this thing can end up saving you some time and make your production easier. Thanks! Carl

Hi @Ek1 Just add actionHover.progress(.5)after you setup your timeline (line 120 on your codepen).

Hi @Ek1 Have you tried using .fromTo Tweens for this? That way the start and endpoints are both existing in the animation code. actionTrHover .fromTo($trPoly,time, { attr: { points: "0,0 100,0 100,100" } }, { attr: { points: "-10,0 100,0 100,110" } }, 0)

You can write your own function. var docStyle = getComputedStyle(document.documentElement); function getProp(value) { return docStyle.getPropertyValue(value); } TweenMax.to(".foo", 1, { color: getProp("--red") }); TweenMax.to(".bar", 1, { color: getProp("--some-other-value") });

Changing the scroll position is messing with Draggable. Probably something @GreenSock will need to check out. But I would just use an input range, and style it vertically. Very quick example. https://codepen.io/osublake/pen/98aea4b0fc9545874b686bb1f23257a8

You'll need to provide a demo to show the problem.

No, I didn't use those plugins. I was just demonstrating how you can use a simple calculation to figure out where something is on grid with dimetric projections. Using those plugins is definitely the easiest route. Not really. The path just needs to follow exactly where you want your object to move along. During development, it might help if you can visibility see the path, to make sure your object is following it correctly, but after that you can hide the path. In this version, I moved the path inside the SVG's <defs></defs> tags so it doesn't render the path. https://codepen.io/osublake/pen/3e35d4db342b87436c59ae09fe0ae88f An easy way to start testing stuff out is on CodePen. Check out this post about how to get started with CodePen. It has some starter templates with all the plugins loaded that you can fork. You can just copy and paste your SVG markup inside the HTML section of a pen. If you're using Illustrator for SVG, here's a good post that shows how to get the markup.

Just build the path on the fly. https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths Is this what you're going for? https://codepen.io/osublake/pen/d1b65a87c5bb18ff6187680c036d24ac If you want curves, here's one way to do it. https://codepen.io/osublake/pen/862fc46fb3781fcc08ddfd7e5fa9f6f3

How I mostly do it is as follows: Split the text using SplitText utility Stagger the character elements Just a quick demo https://codepen.io/kishin-karra/pen/jOONQrQ

Yeah, the key in situations like this is to add some points/anchors strategically, like in the area where there's more complexity. Here's a fork where I added a few anchors to your circle: https://codepen.io/GreenSock/pen/3e9d1e04813e3894985befe810a2b4f3 <path id="start1" class="cls-1" d="M0,207.78C0,177.4,24.624,152.78,55,152.78,58.038,152.78,61.01762,153.026,63.92129,153.5,81.692,156.398,96.6,167.812,104.322,183.417,105.685,186.17074,106.825,189.055,107.716,192.046,109.201,197.03,110,202.31238,110,207.78,110,211.88,109.55,215.877,108.7,219.72,106.714,228.692,102.538,236.84,96.76,243.574,86.67313,255.331,71.7,262.78,55,262.78,24.624,262.78,0,238.156,0,207.78z"/> Does that help?

Like this? Notice the repeat. TweenMax.staggerFrom(".st10", 0.3, {opacity:0, ease:Expo.easeIn, yoyo:true, repeat: 1}, 0.35);

You have tl.play() where it should be secTimeLine.play(). Besides that you should change the animations state variables that you have to match what's going on. So changing isOpen to false in the close function and true to the open one. I think you should probably be using another Boolean value instead of Open.current... It seems that you don't have a great grasp of JavaScript logic. Maybe a free online course would help? Codeacademy.com has a great course. Edit: I just found out they're no longer free. You could try the free trial but I'm sure there are other free courses out there that are good.

I see Apple finally added support for Pointer Events. That would be my best guess. https://developer.apple.com/documentation/safari_release_notes/safari_13_release_notes Does the same behavior happen with other browsers on iOS? And does Draggable's click still work? Draggable.create(el, { onClick() { console.log("click"); } }); I haven't downloaded iOS 13 yet, so I can't test this stuff out right now.

There are multiple ways to do this sort of thing. Not using a timeline is one way, but you may run into trouble if a user double clicks (in which case you would need to kill the previous animation). Having a timeline that has two parts to it and making use of .tweenTo() is another way

Knowing the iOS version and Browser Version go along way in finding what could be happening since various render bugs are related to various versions of the OS and Browser. They are sneaky that way.. To check iOS Version / Safari Version: On an iPhone, iPad, or iPod touch To find the iOS version installed on your device, go to Settings > General > About To check iOS Chrome Version Open Chrome on your iPhone or iPad. It's the round red, blue, yellow, and green icon labeled “Chrome” that's usually on the home screen Tap ⁝. It's at the top-right corner of the screen. Scroll down and tap Settings. ... Scroll down and tap Google Chrome. ... Find the version number next to “Version.”

Thanks guys, I found that my problem is that I am using componentDidUpdate, because I need to children to listen for the parent change and that was causing the problem, but I will use React Transition Group. I will add the CopePen next time, sorry about that, thanks a lot!

Because the angle isn't as steep as it is in true isometric, 116.565 degrees vs 120 degrees. That video talks about the difference starting at around 1:30. A quick fork that allows you adjust the values. I'm not sure I'm not seeing that when I set z1 and z2 to the same value. Do you mean that it should be hidden when z is 0? And what browser are you seeing that in? https://codepen.io/osublake/pen/44a86e5c54ec6d6ad0c85cfe50f4fcf2

Hey kbeats, good question A few notes: When using timelines, you almost always want to initialize the timeline at the beginning and then manipulate/control (i.e. .play(), .pause(), .progress(), etc.) that timeline. If you create a new tween every hover event (like you're doing in your demo above) you're adding to the timeline each time, therefore not really using the timeline's functionality. When you find yourself repeating code over and over again, that's usually a good time to make your code more abstract! Most of the time that means using functions more. It looks like your _out animation is really just a reverse of your original animation. So we can make use of GSAP's .reverse() method. Instead of adding everything to each button specifically, it's more efficient code wise to select both (all of) them at the start and then loop through each of them to prevent code duplication. You can attach the timeline to the element itself to make accessing the timeline more easy in other parts of your code. Altogether, I'd do it by using an approach like this one: https://codepen.io/GreenSock/pen/PooqwQy?editors=0010

Nice find! Never knew about that event, although I just did a quick test, and it looks like sticky doesn't work with the smooth scroll. I'm guessing it's because the element technically isn't being scrolled. It's being translated in another container.

Your English is fine. 😀 Sorry, but I really don't have a lot of free time to work on this right now. I'm thinking that it might be possible to keep it from scrolling using position:sticky. Kind of like this. https://codepen.io/osublake/pen/41a997ea6297132313629b608d0ba39f Although I'm not sure how you can determine if an element is sticky.

You aren't using a valid target. Like this. TweenMax.from(linePath, 1, { drawSVG: "0%" });

Thanks, that worked perfectly! I had done everything except resetting the TweenLite and pausing the Timeline before clearing it. Really appreciate your help.

Sort of. You can tween from middle values by using a fromTo, i.e. t1.from("#Trace_line", 10, { drawSVG: "50% 50%" }, { drawSVG: "0% 100%" }); So with your demo we can get the percentage of each circle and animate from the first click percentage to the later one: https://codepen.io/GreenSock/pen/xxxKpaJ?editors=0010 Note that I changed your mapping function. I am not sure where you were getting the values that you had... If you need to change the actual origin (i.e. where the wrapping point is; which one is "first") that's technically doable but a bit more complex. In GSAP 2 I think you'd have to change the actual path which wouldn't be fun.

It's not hard, and I have plenty of demos that do this (search around this forum or my pens on CodePen), but I don't have the time to work your problems out for you. This is very similar to the demos I made in this thread.

Just rotate the wheel so your arrow points to the top. No need to modify the code.

thanks guys - sorted

Hey @Chris Prieto, Try a circle with 5 points https://codepen.io/mikeK/pen/MWgMQeL It could be tear-ish ... Mikel

You don't need to unobserve, you can just change .play(0) to .play() and make sure that the timeline is paused (and prevent the intersection observer from firing on load). https://codepen.io/GreenSock/pen/GRKbWEp

Hey @bootstrap007, Welcome to the GreenSock Forum. Try for example this code https://codepen.io/mikeK/pen/rNBEVda Happy tweening ... Mikel

Well, "butt" and "square" are values of the SVG path's stroke-linecap. I was just saying that's the type of linecap you need to use in this case. Animating a path should be straightforward, but here are some simple demos pulled from other threads: https://codepen.io/GreenSock/pen/KWQrvm?editors=0010 https://codepen.io/GreenSock/pen/KdPKZY

This is from another project, but may help. See how the target follows the path on the first tween, but draws the path on the second part. https://codepen.io/PointC/pen/WpPRxo Lines 12-14 are the important part. tl.add("label") tl.to("#path2", 3, {drawSVG:true}, "label"); tl.to("#target", 3, { bezier:{values:motionPath2, type:"cubic"} }, "label"); By using a label, both tweens play at the same time. One animates the target along the path while the other draws the actual path. Hopefully that helps a bit. Happy tweening.

In the demo in the thread linked to, you can see this function: const toggleMenu = (e) => { e.preventDefault() if (isAnimated.current) { return; } isAnimated.current = true; if(isOpen.current) { closeMenu() } else { openMenu() } } It makes use of a boolean to check if the animation is playing (and returns if so). It makes use of a second boolean to keep track of the state to determine which timeline to play. Does that make sense?

Hey @Phil Nichols, Welcome to the GreenSock Forum. What exactly you want to achieve, what effect with which impression, I do not know. Therefore here only for fun: rolling, scrolling numbers https://codepen.io/mikeK/pen/zYOMLev Happy tweening ... Mikel

Nice now I'm going to have to steal it.

Welcome to the forums! It looks like TweenMax is doing exactly what you're asking it to do (move the element with the class "PlayStationPlus" to the right by 600px). I'm pretty lost as to what exactly you're trying to do and why you think TweenMax isn't working. It looks like you've got a bunch of CSS animations applied to various elements. I'd suggest maybe starting with a much simpler setup, get an element or two animating, and then building on that. If you're still having trouble, could you please give us more info about exactly why you think TweenMax isn't working and what you're trying to do? A much simpler Codepen would also be very helpful. We'd love to assist you...I'm just not sure what you're asking.

It's not involved. Delete that tween code, and it would still work the same. You're setting the d attribute, which makes the path visible.

If you're looking to go from the start (or last clicked dot) to the clicked dot, you could use this: let t1 = new TimelineLite({paused: true}); t1.from("#Trace_line", 10, { drawSVG: "0%" }); document.body.addEventListener("click", e => { var percent = parseFloat(mapDot.get(e.target.id)) / 10; TweenLite.to(t1, 2, {progress: percent}); });

And I think you can use a pattern to cover your image. But this is something that you should work out on your own. We don't have the time or resources to do everything for you. http://tutorials.jenkov.com/svg/fill-patterns.html https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns

It looks like you're using SMIL. Do you have a GSAP question?

I've searched in a lot of forums and sub forms on here and I can't quite figure this out... I've remade a similar codepen using three.js and it is pretty much the same (albeit much less code) as the initial codepen I added to this thread. I can get it working with the mouse (it is a little clunky but good for a POC). Now I am trying to get Tween to work to slow the animation down to where it doesn't snap to the mouse pointers location. In the codepen I have the Tween code commented out and the values that are setting the rotation in. I can't seem to get the tween to work, I am getting a 'cannot create property '_gsTweenID' error. I've looked through a couple forum posts and it references that you shouldn't specify the *.y or *.x properties, but I can't get any rotation out of it when I remove them. https://codepen.io/austin-areaux/pen/LYPKRXP

Again, it's very difficult for us to be able to help without seeing it for ourselves. Can you not upload the setup that you have to a server and share the link with us?

Try putting the transform to center it in GSAP as well. That way GSAP knows its there: https://codepen.io/GreenSock/pen/XWrQLgz

Finding a good animation tutorial is hard. Finding one that shows how to do complex interactions with GSAP and PixiJS is going to be even harder. I seriously doubt one even exists. You're going to have to learn it the same way everybody else has, through your own experimentation and research. Start out small, and don't be so ambitious. Make a bunch of pointless stuff, and build off that. There is no "right way" to do it. If you get the result you want, then it's right. Sure, there are better ways of doing things, but that shouldn't be your focus while learning. A little demo to get you started. Based on one of @PointC's first experiments with PixiJS. GSAP Resources this forum CodePen https://codepen.io/search/pens?q=pixijs&amp;page=1&amp;order=popularity&amp;depth=everything&amp;show_forks=on https://codepen.io/search/pens?q=pixi&amp;page=1&amp;order=popularity&amp;depth=everything&amp;show_forks=on PixiJS Resources https://github.com/pixijs/pixi.js/wiki/Getting-Started https://pixijs.io/examples/#/basics/basic.js https://github.com/kittykatattack/learningPixi https://github.com/pixijs http://pixijs.download/release/docs/index.html http://pixijs.io/pixi-filters/tools/demo/ https://pixijs.io/pixi-filters/docs/

Problem was your box was covering the buttons so subsequent clicks were not happening. You either change the z-index of the elements or change the order in html. Also, you don't need to add your tweens in the timeline, it is going to add new tweens to your timelines on every single click. Using tweenmax or local timeline is enough in this scenario. I also tweaked your conditions as second if statement was unnecessary.

No need to thank me, you did all the work. You should pat yourself on the shoulder. I am just parroting opinions here. Go Forth and Tween!

Hi reubenlara Welcome to the GreenSock forum. You can add a function using the add() method, but it doesn't take parameters. Please use the call() method like this: // change this .add(insertBG("01.png",".testcard"), "scene01") // to this .call(insertBG, ["01.png",".testcard"], this, "scene01") That should get you working correctly. Here's some more info about call() https://greensock.com/docs/#/HTML5/Animation/TimelineMax/call/ If you have other questions, it's usually best to start a new topic. When you post on the end of a thread that is marked answered your question could get overlooked and we want to get you the best answers possible. Hopefully that helps. Happy tweening.

Interesting. I have never seen it used inline and I can't imagine a scenario where that'd be useful/necessary since inline styles have the most specificity - could you enlighten us with a practical use case? In all the time that GSAP has been out, not a single person has ever asked about this or expressed such a need. Congratulations, you're the first To answer your question, !important isn't currently supported. I suppose you could use an onUpdate to apply it though. Perhaps: onUpdate:function() { element.style.display = "block !important"; } Although since that's not really a tweening value, it may be best to use an onStart or onComplete instead of an onUpdate. And again, I'm really interested to see a practical use case for this.

I replied too soon... should have tried it first. THIS IS SICK COOL! Had no idea I could tween the timeScale property. Thanks again, Carl!!!