Leaderboard

Hi @callmegoon Welcome to the forum. If I understand your question correctly, I think you'll find the drawSVG plugin most helpful. Here's a fork of your pen: Is that what you needed? Here's some more info about DrawSVG: https://greensock.com/docs/Plugins/DrawSVGPlugin DrawSVG is a Club GreenSock bonus plugin. (many others included too) Here's some info about the club: https://greensock.com/club Hopefully that helps. Happy tweening and welcome aboard.

Hi @andrewnelson Welcome to the forum and thanks for joining Club GreenSock. I'm not 100% clear on what you're trying to accomplish here. There are several scripts missing from your demo (ScrollMagic, ScrollMagic Indicators & the GSAP plugin for ScrollMagic). You'll also need to define a controller so the scenes can be added to it. Here's a fork of your demo with those changes. I just set some other properties so you can see what's happening. It's always easier to debug ScrollMagic using the indicators so I've turned those on as well. You are running an each() loop on the <ul>, but you only have one <ul> and then another each() on the <li> tags so I'm a bit confused. What exactly should be happening? It looks to me like you want to stagger each <li> into view as soon as the <ul> enters the screen and then fade the entire <ul> when it hits the top. Is that accurate? You can fork my demo and make more changes, but some more info about the desired outcome would be most helpful in getting better answers for you. Happy tweening and welcome aboard.

You can explicitly hide all those elements before timeline starts, or call another loop before adding those child timelines that will hide them. There is nothing GSAP can do about it, you can use call method on master timeline right before adding these child timelines to hide elements but either way it is same thing I am suggesting. Just comes down to how you would prefer to do it. EDIT: @David Barker Sorry for the confusion, you will need to hide those elements using CSS by setting their scale to 0. That will give you desired behavior.

This should get you going. Demonstrates the css and how you might do the expansion animation with your switch. Note that if you are expanding the panel to full width then your idea doesn't take into account reversing to the initial state. You're going to leave viewers with the expanded item and no way to escape it without additional logic.

Very nice site there. It looks like it is using a Single Page Application (SPA) approach Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app. SPAs use AJAX and HTML5 to create fluid and responsive Web apps, without constant page reloads. However, this means much of the work happens on the client side, in JavaScript. For the traditional ASP.NET developer, it can be difficult to make the leap. Luckily, there are many open source JavaScript frameworks that make it easier to create SPAs. https://msdn.microsoft.com/en-us/magazine/dn463786.aspx For some demos using GSAP in an SPA check out this wonderful thread from @OSUblake

Most probably you are using from tween and setting scale to zero somewhere or you have multiple tweens controlling same element. Without a demo it will be hard to help you, so please post a reduced case demo.

Nice job, @PointC! I definitely like the DrawSVG option. And here's another approach that doesn't use any SVG - instead, it uses regular <div> elements that are skewed (animating transforms might be a tad faster though I haven't tested in this case). Simply add a ".hover" class to any element in this demo, and it'll get one of these animated lines to the left. You can mess with the angle and margins and timing if you want. Works fine no matter how quickly you roll over/off things... Have fun!

Thanks for the clarification. It sounds like you are going to have to determine which column you clicked on and move it over to the left based on how many columns are to the left and how wide they are. Likewise every column to the left of the one you clicked will need to move left and every column to the right will need to move right. Its all possible but it would take a nice chunk of custom code and how its written would be highly dependent on how your html / css is set up, whether or not the whole thing is responsive, and whether or not there can be a variable number of columns. There a hundreds of ways to approach accordions like this going back to the Flash days. I'd say google around a bit as I'm sure you will find some ideas to borrow from similar examples. Unfortunately, unless someone has a similar situation or demo to reference its not the type of thing we can dive into. If you have a question more related to animation and GSAP, we'd love to help.

I added some logic for a clickable reverse that seems reliable.

Hello @hemmoleg and Welcome to the GreenSock Forum! Seems like your custom JS code is running before the DOM and window is loaded, meaning your stylesheet is not loading before the GSAP getRule() runs. You can do a number of things: Try placing your script tags right before the </body> ending tag. So the DOM is almost compiled by the browser. Wrap your custom JS code with a DOM ready and or a window load event check to make sure that the DOM is fully ready and the window event is fully loaded. // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until external stylesheets, links, images, and other external assets are loaded in the window window.addEventListener("load", function(){ // custom GSAP code goes here }, false); }); Make sure that the selector in your external stylesheet file has the same CSS rule that you are targeting in your getRule() code. i.e. "#t1:after" Let us know if any of those help. If your still having an issue please create a limited codepen demo example so we can see your code in context. Happy Tweening

@GreenSock FTW! That's a cool idea there Jack.

Hi @athuillier Welcome to the forum. In addition to @Sahil's excellent advice, I'd add that if you do want to loop through a group, it's easy to do so. Here's a basic example: Using that same technique, you could add all those individual animations to a master timeline for complete control. Happy tweening.

You were using really old version of TweenMax which wouldn't work even though you used correct code. You can use a staggerTo tween to add delay to subsequent tweens and to use random values on each tween you can pass a function for each property. So GSAP will loop through and get random values for each tween. BTW cool demo.

Loving it @GreenSock ! This solution seems to solve my Safari - much appreciated ?

Thanks @PointC - buttery smooth ?! I'm still seeing some weird Safari issues when the line reverses, but this is a great starting point for me!

I don't know why I didn't think of that. ??‍♂️ Thanks!

Hello @PointC thanks for the warm welcome! I appreciate you going through the CodePen and sorting out the missing scripts! I haven't used much of CodePen before so this will be incredibly helpful moving forward. As for the purpose of the code: There are multiple <ul> on the page, so calling the TimelineMax for each one. onEnter, the triggerElement will be the <ul> and then the <li> will stagger in. onLeave, each individual <li> will have an individual triggerElement and the <li> will fade out to 'opacity: 0' over a duration of 15px I apologize for the lack of clarity in my explanations and my code, this is all still quite new to me. Thanks again!

Hi PointC, Thanks this works.

Thanks, I was aware that plugin makes much more than just interpolation of values when tweening "d" attribute. Videos on your youtube channel explained that well

Great demos, Sahil!

It should be on by default, but maybe try here. https://support.biodigital.com/hc/en-us/articles/218322977-How-to-turn-on-WebGL-in-my-browser

Only thing that can cause that error is if you are loading TweenLite after your custom script.

Nice work Dipscom! A welcome break from minimalist material design. You were lucky to have a client with the vision to get creative.