Popular Content

Showing most liked content since 02/21/2018 in all areas

  1. 12 points
    Hi GreenSock community, It's been about 4 months that I started participating in forum with intentions to learn while trying to help others and solving their problems. I am mainly writing this to inspire everybody to try participate in the forum without doubting yourself and help & learn. Ohk so @PointC has already written a similar post about his experience of participation in forum for a year so I will try not copy him plus I can't really be as creative as him. First, time to thank everyone, Starting with Mr. GreenSock himself, Jack thanks a lot for putting all the efforts and creating this awesome library. I can't really imagine how you have managed to write and maintain thousands of lines of code for years. I know you take a lot of pride in your code and sometimes people including me call something a bug even though it is their own mistake, so nowadays I give it a lot of thought before calling anything a bug. I would love to look upto to you but I don't want to wake up in the middle of sleep with headaches. Happened to me twice because my brain tried to solve unsolvable problems in sleep. I don't know how you manage to sleep, because I will never sleep with the thought that thousands and thousands(millions maybe?) of people are using my code with such inconsistent environment of browsers. Thank you so much. Interestingly you gave me that final like. NOTE: Hey @PointC not trying to copy you but it is getting on similar track. GreenSock Ambassador Carl, You had said in your first message I might get addicted to the forum and it really happened. Your story of how you came to be GreenSock ambassador is really great. Your last post on snorkle tv is inspiring as well, though I never continued to post any more video tutorials. So I might just take a short break and start doing that. All conversations with you has been really pleasing. Thanks for always being nice and encouraging to me. Again, thanks Jack and Carl, for always appreciating and ignoring my wrong answers . Your messages mean a lot to me and I often re-read them. Mr Creative Craig AKA PointC, I will start by saying, I was really excited to start participating in the forum along with you and Jonathan. So it was really disappointing to see both of you less frequently, or was it because of me trying to answer everything? It is always fun to have you on the forum, I have learned a lot from your demos and I would really love to get 2 cents of your creativity. I have even posted many answers just by posting your demos, so thanks for all the cool demos, tips and tricks. Mr Mustache Jonathan, Hey Jonathan, would love to see you more often on the forum. When I was new, I never read your CSS related posts but they are most valuable. I remember I tried all forums for some CSS related issue but only your knowledge helped me fix the issue. That's really amazing. Thanks for all the work you do in your CSS world. Also, what's with the mustache? Do you have same mustache in real life? @Dipscom I am still waiting for your big explosion demo. You always keep things fun and happy with your own style, it is fun to read. I mentioned writing clean code, there was one thread with really ugly code from OP. You responded to it by cleaning up the code that looked neat, that actually inspired me to start writing cleaner code. Thanks a lot. I remember you saying that you don't even get to see leaderboard because of me. But remember recent thread about stagger tweens? I only answered that because I had read your blog post about stagger tween returning an array, those could have been your likes. Well, I hope you find time to post that big explosion before my Comma Club post. Also, after seeing your brave act of walking alone into darkeness, I will request @GreenSock and @Carl to give you 'Brave Warrior' badge. Thanks for keeping it fun, very few can do it. Mikel @mikel Thanks for always liking my posts it is fun to have you here, some of your cool holiday related demos and puzzling 2 lines are fun to see. @Shaun Gorneau You were like ninja of this forum, I would rarely see you active but you will suddenly leave couple but precise answers. Hope to see you continue your ninja activities. You don't have to be a 'Guru' to participate When I started participating in forum I hardly knew much about GreenSock and many finer details of it. I have often asked questions that can be answered just by visiting the Docs, but I still decided to start participating. By trying to help others you come across problems you might never face but it prepares you for the future scenarios. I know how some physics based canvas animations are done but I would have never touched SVG for next 2 years, by participating I learned things that I would have never tried on my own. It's not just SVG though, many weird situations involving timelines, complex animations, variety of GSAP plugins, some rare edge cases that teach you a lot more about how GSAP works. I also learned how to write better code, I used to write really ugly code but seeing how others write, I have improved a lot. Not just better code, I learned many new ways to write usual JavaScript and learned to name my variables better. I learned how to write something with fewer lines or a lot smarter approaches that reduced my code from 20 lines to 2-3 lines. Best part about participating in forum is you either get to confirm that what you are doing is right or someone will point you to better approaches. So if you are new, still learning then give it a try and it will only benefit you. You don't have to go all crazy and spend a lot of time, an hour a day is enough. You just take few steps out of your comfort zone and with time you guys will learn a lot. Some of the new members/participants I would like to mention, @Visual-Q and @AcccentYou guys are doing great with your recent participation, hope you continue to do so. @lenncoWhy stopped suddenly? Was looking forward to you highjacking every thread. Hope to see you back. Hey @Noturnoo I think it's time you start helping others, I believe you can do it. @smallio, @Woohoo and @Scarybelles I read your recent posts, like everybody suggested if you visit forums regularly and try solving problems of others, it will always introduce you to something new. So I hope you guys participate and continue to do so, and anybody else might be inspired by it. That's all. Thank you guys. Hundred Times Smarter Guy Couple of years ago I had posted a question and I got really great answer and from that moment I was inspired to learn something from new. I messaged Blake and told him that I would love to learn from him, I tried to participate in forum so I won't miss any of his posts but I stopped with animations altogether. Then suddenly last year I started posting questions and like always Blake answered my question generously and even wrote a demo from scratch to help me. He helped me inspire to keep learning, help others and keep doing it. If I ever helped you it's all because of Blake. If it wasn't his participation of the forum I don't know if I would have been as excited about animation as I am now. Hey Blake, Thanks for everything you have done for everyone here and helped me always. You have helped me improve on so many levels, from writing clean code to writing smart code. Thanks for making me quit jQuery, I would have never quit using it. The best moment for me on forum is whenever I would answer questions in forum along with you. Thanks for always correcting my mistakes, and introducing me to new ways to do things. I don't know how you manage to do everything with all the details. It is amazing. I have learned so much in last few months but you still seem hundred times smarter to me. Hope you continue inspiring more people. You are amazing and a great person. I will always be grateful to you, Thank you. Thank you all, Sahil
  2. 8 points
    @Sahil Thanks for the mention! I fell in love with GSAP and this community nearly immediately as well (I think it was back in early 2013!!!)! I try to get in here as much as I can, and I hope it can be a lot more in the coming months! I've gotten bogged down in projects too often lately ... whenever I come up for air, I jump back into the GSAP forums to remind myself why I love development so much; because it CAN be ridiculously fun! Thanks to GSAP, Jack, Carl and the community!!
  3. 7 points
    So, last night I was listening to Jack's awesome interview with egghead.io (https://itunes.apple.com/us/podcast/egghead-io-instructor-chats/id1308497805#) and he started talking about all the unexpected uses of GSAP, and it got me thinking; what have I used GSAP for? And I realized the range is from pretty typical to not so typical! My line of work is for a few large clients. So I've used GSAP on many projects; some externally facing (marketing sites) ... some for "exclusive" groups (targeted marketing), and many internally facing (for very specific groups ... members and employees). So, for the typical stuff, it's Immersive content UI indicators and helpers UX sauce For the not so typical, it get's pretty varied pretty quick! But the one project that sticks out the most is GSAP as the heart of a frontend delivery system (backed by Drupal) that drives a community cable channel for a gated resort community in GA. The Drupal side allows content managers to create and place 3 types of media; image slideshows, video, and embedded (iframed) HTML. They have control over timings and transitions which map out to GSAP, background audio playlists and ducking (the ducking is tweened with GSAP ), and asset publish/unpublish dates. For the embedded HTML ... they are calling in external sites which are slideshows, but managed by another group for another purpose; a real estate listings slideshow of active properties within the community that is displayed on a large screen in their sales office which is ... you guessed it ... GSAP! It cycles through 280 properties (+/- a few) daily; transitioning in a property image, then a delayed detail and pricing overlay slides over a portion of the image. But back to the cable channel ... every asset and configuration managed on the Drupal side is fed through custom template files that generate all the GSAP Timelines and Tweens. It has been running for years and is rock solid! So, my not so typical uses are cable channel programming (in the sense of delivering programmed content), digital kiosks, and digital signage. So, I'm curious ... what have others used GSAP for that might be a little outside the norm?! Edit: I changed the title from "What have you done with GreenSock?" to "How have you used GreenSock?" Upon reading it back some time later ... it occured to me that the title could be implying that something is wrong with GreenSock Of course there isn't!
  4. 7 points
    Hey fellow GreenSockers, I’ve seen some demos and questions lately with SVGs containing nested groups that are 10 deep and generic class names that aren’t helpful. This makes your job tougher, so I thought I’d share a few tips for better SVG exports from Adobe Illustrator. I’ve created a simple SVG with a background rectangle, some ungrouped squares, a group of circles, a group of lines and one open wavy path. Here’s the artwork with the layer panel in AI. Tip 1: IDs If you have elements that you know you’ll be targeting individually, give them an ID in AI. In this case I’ve given each of the colored squares a name. I’ve also named the wavy open path. Tip 2: Grouping If you have a group of elements that you’ll want to stagger or somehow target as a group, create a group for them. Simply select all of them and pressing Ctrl + G will make a group for you. You can also create a sub-layer and add them to it or create an entirely separate layer. Do whatever works for you. Just get them grouped before export. You can see in my layers panels I have a masterGroup around everything and then nested groups around the straight lines and circles. The elements in those groups do not need an ID as I’ll have no need to target them individually. You can also use nested groups within nested groups. Maybe a character has a group called ‘#face’, but the eyes need to be their own group within the face group. If that’s what you need for control, go for it. Tip 3: Export Settings Choose File –-> Export –-> Export As --> then choose ‘Save as type: SVG’. The directory is unimportant as you won’t actually be saving it. Choose Export at the bottom of that panel and then we’ll get to the important settings. The next screen you’ll see will be for the SVG Options. At this point you could choose OK and the file would be saved, but I find it best to click to ‘Show Code’ instead. That will launch a text editor which will allow you to copy and paste the code into your editor. Make certain the Object IDs is set to Layer Names. If not, the group names and path IDs will not come through to the SVG. The most important setting here is the Styling. If you choose: Internal CSS, you’ll get a bunch of generic class names. The IDs will still come through, but I don’t find generic class names helpful at all. Here’s what you get with that export. <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500"> <defs> <style> .cls-1 { fill: #333; } .cls-2 { fill: #ff0; } .cls-3 { fill: #7ac943; } .cls-4 { fill: #3fa9f5; } .cls-5 { fill: #ff931e; } .cls-6 { fill: none; stroke: #e6e6e6; stroke-miterlimit: 10; stroke-width: 4px; } </style> </defs> <g id="backgroundGroup"> <rect id="backgroundGray" class="cls-1" width="1000" height="500"/> </g> <g id="masterGroup"> <g id="nestedCircles"> <circle class="cls-2" cx="650" cy="150" r="50"/> <circle class="cls-3" cx="650" cy="350" r="50"/> <circle class="cls-4" cx="850" cy="150" r="50"/> <circle class="cls-5" cx="850" cy="350" r="50"/> </g> <rect id="greenBox" class="cls-3" x="100" y="100" width="100" height="100"/> <rect id="blueBox" class="cls-4" x="100" y="300" width="100" height="100"/> <rect id="orangeBox" class="cls-5" x="300" y="100" width="100" height="100"/> <rect id="yellowBox" class="cls-2" x="300" y="300" width="100" height="100"/> <path id="wavyPath" class="cls-6" d="M68,457c45.67-15.25,115.6-33,201-31,84.49,2,104.92,21.37,193,25,108.61,4.48,136.93-22.58,236-28,61.7-3.37,150.91,1.64,262,43"/> <g id="straightLines"> <line class="cls-6" x1="450" y1="100" x2="450" y2="400"/> <line class="cls-6" x1="500" y1="100" x2="500" y2="400"/> <line class="cls-6" x1="550" y1="100" x2="550" y2="400"/> </g> </g> </svg> For styling I prefer to set it to Presentation Attributes. Here’s what you get with that setting. <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500"> <g id="backgroundGroup"> <rect id="backgroundGray" width="1000" height="500" fill="#333"/> </g> <g id="masterGroup"> <g id="nestedCircles"> <circle cx="650" cy="150" r="50" fill="#ff0"/> <circle cx="650" cy="350" r="50" fill="#7ac943"/> <circle cx="850" cy="150" r="50" fill="#3fa9f5"/> <circle cx="850" cy="350" r="50" fill="#ff931e"/> </g> <rect id="greenBox" x="100" y="100" width="100" height="100" fill="#7ac943"/> <rect id="blueBox" x="100" y="300" width="100" height="100" fill="#3fa9f5"/> <rect id="orangeBox" x="300" y="100" width="100" height="100" fill="#ff931e"/> <rect id="yellowBox" x="300" y="300" width="100" height="100" fill="#ff0"/> <path id="wavyPath" d="M68,457c45.67-15.25,115.6-33,201-31,84.49,2,104.92,21.37,193,25,108.61,4.48,136.93-22.58,236-28,61.7-3.37,150.91,1.64,262,43" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <g id="straightLines"> <line x1="450" y1="100" x2="450" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <line x1="500" y1="100" x2="500" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <line x1="550" y1="100" x2="550" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> </g> </g> </svg> The output is much cleaner and any of those attributes can be easily controlled with CSS or GSAP. This code straight out of AI is ready to animate with no cleanup necessary. You can quickly target those group child elements for whatever you need. It’s the best of both worlds as you can get to each element for a stagger without the need for unique IDs and you can also control them as a collective. The nested circles can be targeted like this: tl.staggerFrom("#nestedCircles circle", 0.5, {attr:{r:0}}, 0.15); Or easily targeted as a group: tl.to("#nestedCircles", 1, {svgOrigin:"750 250", rotation:360}); Bottom line: Better artwork prep will make your GreenSock life easier. Proper names and grouping before you export will make your animation work go faster as you won’t have to fumble with meaningless class names and trying to group things in your code editor. That’s not to say that you can’t tweak a few names or groups – I do that all the time. But the more things you can have exported from AI correctly, the easier your coding and animation work will be. Of course, all this is just my two-cent opinion. Take from it what you will. Hopefully some of it will be helpful. Happy tweening.
  5. 7 points
    You can simply put repeat: -1 on the single tween within the timeline. If you want them to do something slightly different you could add a new tween to the end with new property values and repeat that one.
  6. 7 points
    The best thing to do here for any kind of help would be to distill the problem down in a CodePen. We can then fork and recommend things to fix any issues you might encounter. But, at first glance ... the get rid of the initial flash of the SVG, you can simply use some inline CSS to not display it, add "opacity: 0;" (or visibility: hidden;") to its selector in a style sheet, or load it in with JS within $('document').ready. (I'm sure there are other options I'm forgetting right now). Edit: Dang it ... did it again.
  7. 7 points
    You can use modifiers plugin to calculate values before applying them so your tween will continue playing on resize as if nothing happened. Though if your current tween inside the timeline is not active then you will have to manually set it's position on resize.
  8. 7 points
    Good Day Fellow GreenSockers, GreenSock has recently released a new video tut on a new ease called ExpoScaleEase for smooth scaling and zooming. https://greensock.com/docs/Easing/ExpoScaleEase This video tut was made by the Mighty @Carl, take it away Carl: If you haven't already done so, please check out and subscribe to the GreenSock Learning YouTube channel for more video tutorials. This way you don't miss out on new features and great learning videos from GreenSock. Happy Tweening
  9. 7 points
    I feel very flattered and grateful to some of you have been quoted in a post that is full of good and inspiring feeling. I believe that nothing in life is by chance, for me this forum is equated with a feeling that is lacking in the world, which is solidarity, because here we often see people who have their families, their jobs, their tasks and even valuable time to help a neighbor. I will study and try to help the next ones. So who knows continue to expand this tool that is so useful to everyone. Congratulations and thanks for the words of encouragement, surely they were valuable.
  10. 7 points
    Sahil, Congrats on turning 1000! What is of particular note is that your "likes : content" ratio is off the charts. Also, I'm pretty sure you are also the quickest to turn 1000 as well. But of course its not all about numbers. Its about the way your investment of your time can now impact people in the same way others have impacted you. You never know how answering a question that seems impossible to someone, but easy to you, can totally change the trajectory of their learning path. I'm sure all these people were really touched to hear how they were able to help you and now they get to see that help being passed on again. I'm so glad you took the time to share about your journey. Its been really cool watching you accelerate so quickly. There are plenty of times I shake my head wondering "wow, how did he know that?" and "why didn't i think of that?" Also thanks so much for encouraging others to get involved. I couldn't agree more about your picks! There is a so much potential out there. Keep up the great work and thanks so much for all you have done. Carl
  11. 7 points
    Alright, @Sahil, your post made my day. It's difficult to express how rewarding it is to hear a story like yours (and similarly @PointC's), where you take a chance and start participating in the forums and it leads to such growth, largely because of the generosity and intelligence of the moderators here, as well as your own persistence and willingness to help others. I think that last part is the real key. I remember the days when it was just me trying to answer every question (luckily there were a lot fewer). Yikes! The sense of community and kindness here is so encouraging to me. Every moderator (including you) was carefully selected because they demonstrated not only a solid understanding of the tools, but [more importantly] their positive attitudes. It's often difficult when users don't include any demo or they're rude or post 1,000+ lines of code and expect you to find all the problems. Most communities have snarky, arrogant participants who are quick to make others feel stupid for posting questions, but there's none of that here. It's a "come as you are, we're all learning...it's okay, we'll do our best to help each other" attitude. LOVE THAT! Anyway, thanks for sharing a piece of your story, Sahil. Keep up the great work my friend.
  12. 7 points
    What? Aw, that spoiled my day. Come on, @Sahil, we love having you around here! Don't let @PointC intimidate you He's only pretending to be insecure. This place just wouldn't be the same without @PointC, @Sahil, @OSUblake, @Jonathan, @Dipscom, @Carl, @Rodrigo, @mikel, etc. And now we've got some others coming on strong as well, like @Acccent, @Visual-Q, @Shaun Gorneau and more. Love it! Battle for that leader board, guys.
  13. 7 points
    Just to chime in @Visual-Q, some scroll events, depending on how they were trigered, cannot be cancelled. It might be outside GSAP's reach. @GreenSock himself will be able to confirm that. In the meantime, this article has some useful information about how browsers handle scroll. https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#lvzozB8m1fZOWgTt.97
  14. 6 points
    Hello @RolandSoos This looks like a browser bug in MS EDGE. Since MS EDGE uses webkit as its render engine then it is susceptible to the same type of rendering bugs. So you need to use CSS transform perspective() function instead of CSS perspective property, then you are still using perspective Add this CSS rule right below your .outer CSS rule. It only targets MS Edge /* target only MS EDGE, and use transform perspective() instead of perspective */ @supports (-ms-ime-align:auto) { .outer { -webkit-perspective: none; perspective: none; -webkit-transform: perspective(1000px); transform: perspective(1000px); } } Tested in latest MS Edge 41 on latest Windows 10 Also you might want to add a slight rotation: 0.01 to help it animate more smooth on a new rendering layer. Happy Tweening Resources: CSS perspective property: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective CSS perspective() transform function: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective
  15. 6 points
    What we really need is for you to isolate (or consolidate) the issue down within a simple CodePen.
  16. 6 points
    GreenShock /ɡrēn ˌSHäk/ noun: GreenShock psychological condition caused by prolonged exposure to the GreenSock Animation Platform, especially the use of Club GreenSock plugins. "I’m in GreenShock after witnessing Jack Doyle ‘whip up’ a new plugin and casually post it in the forum." synonyms: astonishment, surprise, stupefaction, incredulity, disbelief, speechlessness, awe, wonder, wonderment
  17. 6 points
    Hi Tomsah and welcome to the GreenSock forums. The issue here lies in the fact that you're creating a new instance of the timeline each time you click on the toggle button. The real kicker is that, since the timeline is on a global scope, everytime the slideMenu method is called, GSAP says: "ok, so your calling a method that adds this instances to the timeline and since you're not specifying where you want them, I'll add them to the end". So everytime you click on the toggle button the timeline gets longer and longer and longer and longer and... you see where this is going right?? React has components lifecycle methods to help with this. You can create the timeline just once in the componentDidMount method and the timeline will be created and you can be sure that your elements are in the DOM when it happens. Just remove the call to slide menu in the toggle button click handler and add the component did mount call in your component: // add component did mount to the class componentDidMount(){ this.slideMenu(); } // remove the slide menu call in the toggle click handler toggleMenu = (e) => { e.preventDefault(); menuTl.reversed() ? menuTl.play() : menuTl.reverse(); this.setState({ menuActive: !this.state.menuActive }) } On a related note, the more purist React developers will consider using selectors like this a big NO-NO: var projects = document.getElementsByClassName('project'); React is all about doing things in a declarative way, so for getting dom nodes the so called "React way" is to use refs which in some cases can be really painful, specially if you're working with components that you didn't wrote, which makes generating and accessing the refs a bit tricky. I've been using React with GSAP for some time now and this is just my opinion, but in the case of elements that are permanently rendered on the DOM and are always there, there's no issue in doing it like you did. If that's no the case, the one thing you have to keep in mind is if a state or props change could un-mount the component being animated or elements contained in that component that could be animated, because the component could be unmounted and the GSAP instance could be still be active and you'll get an error. In that case you can use componentWillUnmount to kill the animation and prevent an error. Happy tweening!!
  18. 6 points
    Hi again @determin1st .. #1 We are helping you... #2 GSAP is already popular and does rule forever This isn't a GSAP algorithm thing . GSAP can only use what CSS property values are reported and computed by the browser, based on how you have your HTML and CSS setup. Like i said above this has to do with the CSS Spec on how height is calculated with box-sizing. As well as how the CSS box-model works. That is the nature of CSS, animating padding will affect height of its parent regardless if box-sizing is used or not Animating anything but transforms and opacity will cause jank (lost frames). Transforms and opacity do not cause a repaint and layout to be recalculated on every render tick frame. Transforms are also better for interface object, since they can animate on a sub-pixel level for silky smooth motion. Whereas padding and other non transform and opacity properties can only animate on a pixel level. And non transform or opacity CSS properties cant take advantage of hardware acceleration (the GPU) for smoother animation. You could take advantage of using transform scale instead of padding. We can only offer advise and solutions, but in the end its up to you. Happy Tweening!
  19. 6 points
    It's not really a GSAP problem, when you animate elements using className, GSAP animates whatever the difference those class create. In your case, you have box-sizing as border-box, which when you change padding causes the height to change. So in order to animate class GSAP MUST animate height, which gives your parent element inline height. So when your child element animates, parent element has it's own height instead of auto height, so it won't animate along with the child element. When animation completes, GSAP like usual will remove inline styles set while animating class which causes the jump. If you put together many such different classes that affect each other or parent and child in MANY different ways then you will see such weird behavior and GSAP can't put logic in the place to address such out of control situations. What you can do is, 1. force height auto by using !important 2. First change padding of parent element and only then animate height of child element. 3. Manually animate height of parent and when animation completes, set height back to auto. 4. Use content box as @Jonathan suggested and as you are using flexbox you don't need to set width 100%, element will set itself to 100% inside the parent.
  20. 6 points
    For the situation where things are going wrong, we'd really need to see a simplified CodePen showing it going wrong. There are a lot of factors that could lead to this type of situation. Not much can be gleaned from a GIF. :/
  21. 6 points
    Hi @emilychews You could do something like this: var tl1 = new TimelineMax({onComplete:function(){tl1.play("start")}}); You could also make the fade tween a stand-alone tween and then onComplete play the main timeline. There are lots of possibilities. Hopefully that helps. Happy tweening.
  22. 6 points
    HI BigTreat, The point of these forums is not to have members build projects on demand, but to show them how to use various features of the GSAP API. The demo Shaun provided should be more than adequate to show how to break up an image and animate different parts. here is another demo from @Rodrigo that uses a full grid. Hit the "remove image" and "restore image" buttons a few times: To build something like revolution slider from scratch with your special requirements just takes too much custom html, css and js. Unfortunately it would be way too time consuming for people to be able to build that properly and try to teach you at the same time. Again, if you have specific questions related to GSAP and a simple demo we can work off, we are more than happy to help. Thanks for understanding.
  23. 6 points
    Hello @determin1st and Welcome to the GreenSock forum! I would have to agree with @Acccent regarding height, padding and box-sizing. The box-sizing property takes into account the CSS Box Model. You can see in the CSS Spec for height that when you use box-sizing: border-box that the height calculation of the browser will include the height of the borders. CSS height spec: https://drafts.csswg.org/css-box-3/#the-width-and-height-properties You also have to take into consideration CSS inheritance, and the fact that anytime you change padding it will affect the height of the parent containing element even without using box-sizing. But you can get around this by: using box-sizing: content-box for div instead of border-box. No need to remove or stop using box-sizing. remove or don't use the !important declaration on the height: auto property for .box selector. !important should only be used as a last resort. Just keep in mind that anytime you animate margin, padding, width, height, and border the animation wont be as smooth as animating transforms and opacity. Since anything animated that is not transforms or opacity will cause layout to re-triggered causing jank (lost frames) due to how CSS is rendered. See Jack's @GreenSock article on this: https://css-tricks.com/myth-busting-css-animations-vs-javascript/ See CSS Triggers: https://csstriggers.com/ Also you should set the duration to a lower number. 10 seconds will be a really slow animation, and look like its either broke or nothing is happening. Setting i the duration to something like 1 second or 0.5 second like @Sahil did in his codepen will make it animate better. For full control sometimes its better to just use a fromTo() tween instead of animating classes using className. GSAP fromTo(): https://greensock.com/docs/TimelineMax/fromTo() Happy Tweening!
  24. 6 points
    Trick for something like the Slide Boxes example is to break up the image (or container with background-image applied) into subdivisions each with the original image applied as a background with the background positioned to present a seamless (an indiscernible at the start) mosaic. Here is an example I made to show this in a post quite a while back ... the idea could be applied to a greater number of sections both vertically and horizontally (or both). Edit: One thing I forgot to mention ... I made this configurable with html data-attributes. So there is a bit of preTweening logic to get those attribute values and calculate the necessary property values for the tween.
  25. 6 points
    I had my tesla prototype driving me around today and it was really weird running the demo on the fullscreen HUD. forget about even trying to use the codepen editor while doing this.
  26. 6 points
    Hi and welcome to the GreenSock forums, I would suggest that you log some of the values you are tweening to to verify that you are passing in the proper information. For instance section1Btn.onclick = function() { //add some logs console.log("offsetY", $(window).innerHeight() / 2 - $('#firstdot').height() / 2); console.log("offsetX", $(window).innerWidth() / 2 - $('#firstdot').width() / 2;) TweenLite.to(window, 1, {scrollTo:{y:"#firstdot", offsetY: $(window).innerHeight() / 2 - $('#firstdot').height() / 2, x:"#firstdot", offsetX: $(window).innerWidth() / 2 - $('#firstdot').width() / 2, autoKill:false, behavior: 'smooth'}},100); }; run that in IE10 and IE11 side by side and make sure you get the same values. If that works, then also try hard-coding the values for y:"#firstdot" and x:"#firstdot" just to help isolate where the mis-calculation may be. If you can confirm that scrollTo plugin is not tweening to the proper values then please provide a reduced case that only has one or two buttons that don't tween properly in IE10. The less code the better. Perhaps there is something we will be able to see in developer tools. Unfortunately, your live site is far too complex to dig into. also, the script url for ScrollToPlugin is odd https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollToPlugin-latest-beta.js Please be sure to use the most recent versions of TweenMax and ScrollToPlugin https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/plugins/ScrollToPlugin.min.js
  27. 6 points
    Read that post a while ago, and at the time I was building this little thing, it's kind of my summary what I learned in little above a year - hope you'll enjoy it https://www.hq-biosciences.com/our-process/ (animations above approx 767px) For me, GSAP was a blessing - special thanks, to @Ihatetomatoes you made it a thing in my life - finally, I could do some fun things with code and learn by doing instead of watching some crazy tutorials where you just use "this" and "this" and then I was just like this O_o Dropped school because of that dull programming theory - we started to learn to programme from "C" language (like WTF) I had a lot of attempts to learn JS but most of the stuff I could just copy/paste without even understanding or trying to understand. (This one helped me understand what's going on under the hood https://www.udemy.com/understand-javascript/ ) GSAP changed my life and made programming much easier to "eat" - I'll probably never be a kickass assembler programmer, but who knows - GSAP is a solid first sock to go anywhere and they should fking teach it at school. Thank you all for helping me in various quests, learning hard to help you too someday (that's hard! Even if I know the answer there are at least 2 answers already submitted - love you all
  28. 6 points
    As a property of TimelineMax(); You can also "yoyo" the tween to get rid of a fromTo var tl= new TimelineMax({repeat:-1, yoyo: true});
  29. 6 points
    You had multiple mistakes, TweenLite was written as Tweenlite Both functions were defined as MoveToRight and typo in list.length as list.lenght Usually these errors can be debugged using developer console. Also, we prefer to get a reduced Codepen demo instead of live sites or git repos. It becomes time consuming to analyze code, reconstruct demos etc
  30. 6 points
    Here is how you can do it. I have left some comments in the code but most of the math is self explanatory, you can learn these kind of animations using this book: http://lamberta.github.io/html5-animation For better performance you can use opaque canvas.
  31. 6 points
    You're a good man @Dipscom. May these brownie points motivate and nourish you on your noble quest. Safe travels my friend.
  32. 6 points
    Congratulations @Sahil. This is a wonderful post. It's not a copy, but it's close enough that I need to charge you a licensing fee. You can transfer 100 likes from your account to mine at your earliest convenience. In answer to your question: you got really active and upgraded to Moderator at the same time as I got slammed with After Effects animations so I had to disappear for a few weeks. That happens to me from time to time, but I always return. It is really great to see how far you've come in such a short time. I'm impressed with your skills and you're a terrific addition to the community. I'm looking forward to your 1,000th post and your official membership in Comma Club. Congratulations again.
  33. 6 points
    In following demo you can see demo by @OSUblake, it is really great demo and perfect starting point for you. You can use that demo to animate those texts. Animating those slides is easiest part, you just have to figure out index of current slide and animate slides using xPercent. Or to save complexity you can slide all slides from one direction only just like those texts.
  34. 6 points
    Hi @Scarybelles That's a really neat animation! I like your approach to learning. That's kind of how I got started. I rebuilt a pretty complicated project from scratch, adding one line of code at time, making sure I understood what everything did. It took awhile, but it was worth it. Here's the basics of the getCoords function. It starts off by creating a div and span. It copies the text from the input to the div, and copies every single style from the input to div. Basically, it creates a clone of the input, but as a div, and appends it to the body. A dot character "." is added to the span, and the span is appended to the div, so it will be right after the text. It calculates the position of the span, giving you the width of the text. That width is then added to position of the input giving you the coordinates of the caret. From there the function calculates the angle from certain points on the SVG to the coordinates of the caret, which are used to calculate other coordinates that are used in the tweens. And at the very end it removes the div so you don't see it. I modified the animation so you can see what's going on a little better. Creating elements and copying styles is a rather involved approach for getting the width of the text Tip of the Day You can use <canvas> to get the width of text, and it requires no DOM manipulation. var cs = getComputedStyle(email); var context = document.createElement("canvas").getContext("2d"); var spacing = parseFloat(cs.letterSpacing) || 0; context.font = cs.font || [cs.fontStyle, cs.fontVariant, cs.fontWeight, cs.fontSize, cs.fontFamily].join(" "); function getCoords(e) { ... var metrics = context.measureText(email.value); var textWidth = metrics.width + spacing * email.selectionEnd; } For help understanding some of the trig used in the demo. Note that JavaScript math functions use radians instead of degrees. Angle between two points var dx = point2.x - point1.x; var dy = point2.y - point1.y; // Note that dy is the first parameter var angle = Math.atan2(dy, dx); Rotate around point var x = centerX + Math.cos(angle) * radius; var y = centerY + Math.sin(angle) * radius; Distance between two points var dx = point2.x - point1.x; var dy = point2.y - point1.y; var distance = Math.sqrt(dx * dx + dy * dy); Convert radians to degrees and degrees to radians var RAD = Math.PI / 180; var DEG = 180 / Math.PI; var radians = 180 * RAD; // => 3.14 var degrees = 0.7854 * DEG; // => 45 Tween with radians // Just add a _rad string on the end TweenLite.to(foo, 1, { rotation: Math.PI + "_rad" });
  35. 6 points
    Hey Kim, Welcome to the forums I'm still relatively new to greensock but I've been designing for as long as I can remember. I've come to believe the two are actually very symbiotic. As @OSUblake said the other day on here. All the best developers he knows have come from a design background (I believe also the Greensock team). As far as design process goes dribble is really incredible for me for a few reasons. People post progress of their work as they are going along & other people rebound them. It helps me see the process & I can deconstruct how things are made a lot easier. For me at least 80% of the things I make come from some sort of visual inspiration. From there it's really just a question of "can I code this from scratch?" No matter what the answer is here, I'll go straight to after effects/in vision/webflow & make a prototype. From here I have pretty much everything I need to start coding it, general idea of structure/easing/colours etc. If I'm still unsure I head to Codepen and see if anyone has achieved anything close to what I'm trying to do and reverse engineer it, as you're doing already! If you're still struggling at this stage you can post your progress on a forum and see if anyone has done something close or can help you towards understanding the hard parts. Absolute worst case scenario: It's too complex & you can save the idea for later, or try and render your animation from after effects using bodymovin & GASP together (super powerful combo)! I also recommend The Futur (they literally have a series called the process which talks about... you guessed it, the creative process). IMO this is the best channel on YouTube... I've learnt more on here in an hour, then I have in some days at university. https://www.youtube.com/user/TheSkoolRocks Finally here's a cool bodymovin' tutorial if you're interested in that as well - Hope at least a tiny bit of that was useful as I say I'm still a nublet. All the best, Smallio
  36. 6 points
    Hi Kim This is one of those subjective questions where 10 different people will most likely give you 10 different answers. I think a lot depends on your individual learning process. Do you prefer books, online tutorials, videos, demos, classes etc... I'm not sure there is a one-size-fits-all approach. You said you're a beginner, but I'm not sure if that means you've been coding for a month or a year. I've been doing this for a few years and there are days I still feel like a beginner. Our resident 'AI from the Matrix that escaped to the human world' @OSUblake will probably tell you that creating little games is an excellent way to learn as that will help you to think logically step by step. It's advice he's given before and I second it. It's one of the things I've been doing lately and it's a lot of fun in addition to being a wonderful learning experience. As far as real world projects go, I think what you're doing by reverse engineering CodePen demos is an excellent way to learn. I'm not sure about any particular classes that take you from concept to conclusion. Others may have some links and ideas about that. I think the biggest thing is just keep writing code. Everyone writes bad code and starts out knowing nothing at the beginning of their coding journey. Write code, write code, write code and then write more code. If you do that and learn a new thing each day, everything will start to click and you'll have may 'ah-ha' moments as you progress. I'm sure others will jump in here, but that's my little 'ol two cents worth for you. Happy tweening.
  37. 6 points
    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.
  38. 6 points
    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.
  39. 6 points
    Hi @candybanners It looks like Edge doesn't like the way you structured your clip path. If you add the rectangle directly to the clip-path without using <use> it seems to work just fine in all browsers. Hopefully that helps. Happy tweening.
  40. 6 points
  41. 5 points
    OK, here goes round 2. A triggerElement needs to be an element that is rendered so ScrollMagic can get its position. A mask is not rendered, nor is any element inside <defs>, so try using another element.
  42. 5 points
    Hey Tomsah, getting back to it now. Not at all, your GSAP instance will be available to every method in the global scope of your module or file. Some people like to attach the GSAP instance to the react component like this: import React, { Component } from "react"; import { TimelineLite } from "gsap"; class MyApp extends Component { constructor(){ super(); this.projectTl = new TimelineLite({paused: true, reversed: true}); } render(){ return(...); } } This allows to pass some of the components props or state properties to GSAP's callback system and stuff like that or if you need to reference a specific method from your component in a callback, or perhaps update the state using onComplete, onRevereseComplete or something like that. I don't see anything wrong with using stagger to do that. Keep in mind though that the stagger methods return a series of GSAP instances with different position parameter applied to them, based on the stagger time you provide. I recommend using React transition group only when the animation is related to the component being mounted/unmounted. For example if you want the element to be mounted before the animation starts and unmounted after the animation is complete, or if you're looking for some finer detail control over the lifecycle methods and associate them to the animation, you can use transition group. Other wise my advice is to stick with GSAP and use it in he usual way with react. Transition group might be a little too much if you're just starting with react and GSAP. If the animation only affects the elements in that component, then there's no reason to have it in a different component. If you want to target some specific callback from a parent component in the timeline, then you can pass it as a property. Finally if you need to access the GSAP instance in different components in your app, perhaps you should think about using redux, mobx or some other store solution in order to access the timeline in different components. Now I have never used redux to store a GSAP instance, but I can't think about a reason against though. Happy Tweening!!!
  43. 5 points
    Try this .. I'm animating the the x property (vs css: { transform: 'translateX'}) and the rotation property (again, vs css:{ transform: 'rotate'}) and it seems to have much better results.
  44. 5 points
    Look at @Shaun Gorneau work with that shiny new Moderator Badge. Seven minutes from question post to answer. Nice work. Congratulations on the promotion. You've earned it. Now you'll have to test your quick-draw question answering speed skills against a super fast guy like @Sahil.
  45. 5 points
    Ya what @Carl suggested works in IE9, also you were using really old version of TweenMax.
  46. 5 points
    I can't change my codepen, sorry! The core of the solution is that every element is initially created at its "center" position (where the ball D is at the start). Then the JS code rotates everything immediately so it appears like it's all properly positioned. The reason for that is so that we have a convenient and identical reference position for everything, which we can then use for all the transforms. Does that make sense? (Again, do say if anything at all is unclear. If you are not sure, it could help to read up on how CSS transforms, and particularly transform-origin, work.) In your example with the 10 balls, it is a bit trickier because there is no universal "center" position – it would be between A and B. But the logic is the same: you need to find a position from which to instantiate everything. I would say in your case it could be where A is. So you would have all 10 balls on top of each other on the A position. You make all of their transform-origins (100% 0%) (100% 100%), which is the bottom-right corner (= the center of the small circle). Then you would need to actually move them from there: so you rotate D by 90°, C by 180° and B by 270° (or -90°). At this point A, B, C and D are correct. Then you need to place the balls for the big circle: first you rotate E by -90° so that it's just below F, do the same with G so that it's below H, and with I so it's below J. (Just to be clear: at this stage, A, F, H and J are in the same spot, and B, E, G and I are also in the same spot just below A/F/H/J.) Then you change the transform-origin of F, E, G, H, I and J to (-200% 0%) (-200% 100%), the center of the big circle, and now you can rotate F and E by -90°, G and H by 180° and I and J by 90°. Now you've placed everything and they all have the same initial reference position from which you can more easily work. When you want to rotate the big circle you make sure that whatever's in the A and B position has its transform-origin set to (-200% 100%), and you rotate all 8 balls by either 90° or -90°. When you want to rotate the small circle, then you change the transform-origin of the 2 balls in the center to (100% 100%) and rotate all 4 balls by 90° or -90°. Try that out and let me know how it goes. Feel free to ask if you need more clarifications.
  47. 5 points
    Hi @InTheOne Welcome to the forum. You're just missing the ScrollMagic GSAP plugin: <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> That plugin allows ScrollMagic to hijack the tweens and timelines. More info: http://scrollmagic.io/docs/animation.GSAP.html Happy tweening and welcome aboard.
  48. 5 points
    @OSUblake I love these detailed replies from you. If you ever want to compile stuff like this into a guest blog post on greensock.com, we'd be happy to do that. Or a recurring "Blake's tip of the day" Nice work as usual.
  49. 5 points
    I think the easiest way to get started would be with a framework like Vue.js, right @Dipscom ? https://vuejs.org/ But don't trust me because I've actually never used it. I just know how it works. jQuery's AJAX is easy to use. https://api.jquery.com/jquery.get/ $.get("some.html", function(data) { // Inject html $(".container").html(data); // Play animation TweenLite.to(".foo", 1, { x: 100 }); });
  50. 5 points
    Thanks for the demo! Looks nice and its super helpful. When you use the "transparent" keyword in GSAP it actually animates to rgba(255, 255, 255, 0) which is kind of like invisible white. below is a demo comparing animating to transparent vs rgba using your color and alpha 0.