PointC last won the day on January 6

PointC had the most liked content!

PointC

Moderators
  • Content count

    1,717
  • Joined

  • Last visited

  • Days Won

    138

Everything posted by PointC

  1. A GSAP tale: One goofy guy’s odyssey from knowing nothing to knowing just enough to confuse himself. (This is crazy long so feel free to jump to the epic conclusion). Greetings fellow GreenSockers. The end of this week marks the one-year anniversary of my first post on the forum so I thought I’d take the opportunity to share my 12-month story and hopefully encourage others to jump into the conversations around here. Maybe you’ll recognize yourself in some of the things I’ve experienced. My quick history in a nutshell Web design and coding is a second career for me. After 15 years of owning and operating a photography studio and processing lab (back in the film days - yup - I’m old), the digital camera came along and changed that industry, which necessitated a new career for me. I shifted to video production, which led to motion graphics and finally to web design. Our little agency now offers all those services. The web design clients never needed anything fancy so JavaScript took a back seat to HTML & CSS only sites for a number of years. JavaScript & GSAP: false starts and other obligations I first discovered GSAP a few years ago, but only tried it briefly. It looked cool, but with the time obligations of field video work and motion graphics jobs, it wasn’t something I could work into the schedule. Besides that, it was JavaScript – too complicated I thought. I knew JavaScript was the third piece of a good web designer’s skillset along with HTML and CSS, but I always convinced myself that I didn’t have the time and the sites we built didn’t need it. JavaScript Books + Classes = Fail I did make a few attempts at reading some JavaScript books and working through some online tutorials, but it just never ‘stuck’. Maybe the examples were too theoretical and dry or they were the wrong books and classes. I really don’t know, but I abandoned the learning process a number of times. Cut and Paste mentality Why did I really need to learn anyway? You can just Google what you need, cut and paste some code and presto – you’ve got some working JavaScript or jQuery. I only understood a small portion of what I was cutting and pasting, but hey… it worked so the problem was solved. That’s how I operated for quite some time. What’s a loop? What’s an array? What’s an object? Who cares? Wait a minute. This is ridiculous. Last spring, I was remodeling our company website and I had all these grand visions about making things move and behave in certain ways. Googling for code just wasn’t cutting it. I suddenly felt stupid. “This is ridiculous!” I thought. I should be able to learn how to write my own code. Oh yeah, I remembered that GreenSock thing I had looked at a few times and abandoned. That might work. Maybe I could actually learn how to use it this time. I become a forum lurker I started lurking in the shadows of the forum. After reading a lot of posts, I saw people asking many types of questions from simple to crazy complicated (at least to me). Two things I noticed were that every effort was made to find an answer (no matter the difficulty level of the question) and not one post was condescending or snarky. That’s quite rare on the ol’ interwebs, isn’t it? Hmmmm…maybe I’m in the right place. Oh boy… time to ask a question of my own One of the great things about learning GSAP is you’ll also pick up a lot of other JavaScript and/or jQuery along the way. I kept reading and practicing with some simple tweens, but now I had a question. Dare I post? I suppose, like many others, I feared looking like an idiot even though the forum members and moderators seemed quite nice and helpful. I do several dumb things every day so you’d think I’d be used to it by now. Oh well, here goes. My first question had to do with the indexOf() a Draggable snap array. Within 30 minutes, Diaco and Rodrigo had posted great answers and neither one called me stupid! Yay – how cool. I get hooked on GSAP and the forum About that same time, I decided our company should discontinue on-site video production and switch to studio only filming. I got tired of lugging loads of video gear in and out of buildings – it’s quite tiring and as I mentioned earlier – I’m old. This freed up some time and I decided to dedicate that time to learning GSAP and maybe, one day, even helping others. It wasn’t too long and I actually knew the answer to a forum question. I posted some information and wow – a little red indicator lit up on my control panel. Someone liked something I wrote. How fun – I’m hooked. Carl makes direct contact I continued to learn and experiment. I posted a few additional questions of my own, but I tried to answer more than I asked. If someone posted a question for which I had no answer, I tried to look it up in the docs and figure it out. Most of the time I was far too slow and Jack, Carl or one of the mods would already have the answer posted before I was done reading the question, but it was an interesting way to learn. I did sneak in a few good answers, which led to a private message from Carl. He thanked me for participating and helping in the forums. I thought it was pretty cool that a super smart guy like Professor Schooff would take the time to do that for little ol’ me. My decision to dedicate time to the platform and forum was reinforced. Blake and I have a conversation I don’t recall if it was a back and forth in a forum post or a private message conversation, but Blake told me something that, of course is obvious, but it stuck with me and is important for all of us to remember. He mentioned that we all enter this learning process knowing nothing. If someone of Blake’s considerable skill level can be humble enough to remember first starting out in code, there may be hope for me after all. I guess if you think about it, there was a time when the simple concept of a variable was brand new to all of us. We’re not born with these abilities. They’re learned and we’re all at different points on the educational path. Never feel stupid for not knowing something. Moderator Promotion Throughout the last year, I’ve continued to learn and study both GSAP and JavaScript. Some of those books I abandoned in the past even make sense now. I’ve tried to be active in the GS community and answer as many forum questions as possible. If I’ve answered a question of yours, I hope you found it somewhat helpful. I’ve cranked out some fun CodePens and finally started a Twitter account to tweet them out. I am nowhere near an expert with GSAP or JavaScript, but I know so much more than I knew a year ago. Apparently I know enough to be entrusted with a forum promotion to Moderator status. I’m honored to be included on such an amazing team. 12 months down – what’s next? My agency duties are still numerous so I can’t dedicate full time to coding, but it remains something to which I’m committed and thoroughly enjoy. I started this 12-month GSAP journey just wanting the ability to write my own code rather than cutting and pasting the work of others. I’m confident I have achieved that, but I still have days when a simple piece of code just won’t coalesce in my brain and that can be frustrating. I guess we all have those days, right? I make several mistakes every day, but that’s o.k. too. I learn a lot more from my screw-ups than I ever do when it all goes right on the first try. I plan to keep learning and getting better and when I get stuck, I’ll be able to get an answer from this amazing community. I’ll continue to give back to the GS community by answering any questions that are within my abilities to do so. The super mods: Jonathan, Blake, Diaco and Rodrigo Thank you to my fellow moderators. You guys rock and have taught me so much. @Jonathan – if there is a browser bug, quirk or special fix that you are not aware of, I’ve yet to read about it. Your knowledge has helped me fix many pieces of code before they even became a problem. Plus, if I ever have a question of top/left vs. x/y, I know who I’ll ask. @Blake – if I could be half as good at coding as you, I’d be a very happy guy. Your work always teaches and inspires me. I don’t think you’re allowed to ever stop posting on the forum or we may all show up on your doorstep and ask questions. @Diaco – your code is always so concise. I deconstruct some of your pens and am astounded by how much you squeeze out of a few lines. If I made some of your pens from scratch, I’d have 20 variables, 5 loops, 12 tweens and 80 lines of code. You do the same with two variables and 4 lines of code. Amazing stuff. @Rodrigo – when searching the forum, I often land on one of your past posts and learn a lot. Your knowledge is vast and I wish you had more time to post around here. Your ninja skills are incredibly strong. Our superhero leaders @Carl – I’ve participated in several online forums ranging from graphic design to 3D to video production, but the GreenSock forum is the best and a big part of that is you. You not only provide great answers, but you do it in clever ways with just the right amount of humor thrown in here and there. The collection of videos you’ve made is invaluable and should be mandatory viewing for anyone interested in GSAP. I’ve seen you monitoring the forums at all hours of the day and even on weekends. When you get any sleep I’ll never know, but I thank you for your dedication and sharing your knowledge. @Jack – how you had the vision to start GreenSock and write the first version of the animation platform I can only imagine. I’m glad you did because GSAP is such an amazing collection of tools. The friendliness of the community is definitely following your lead. I don’t understand a lot of what you talk about sometimes, but I know enough to be amazed by your brilliance and talent. You call yourself just a guy who geeks out about code, but you’re more than that. You’re a smart and generous innovator who’s created a special brand and place on the web. I think I can safely speak for the community when I say we all appreciate the time and effort you put into helping us make beautiful and high-performance animations. Thank you sir. The epic conclusion. Well… maybe just a regular conclusion. If you didn’t read the whole post, I don’t blame you. It’s ridiculously long and I’m just some guy you don’t know so I’ll wrap it up with this bit of advice. Whether you’re a genius or feel like an idiot, it doesn’t matter. Try to learn one new thing each day and before you know it, a year will have passed and all those little bits will add up to new skills and abilities. If you’ve never posted on the forum, please jump in and participate. The more voices we have around here, the more we all benefit. If you need an answer, please don’t be afraid to ask a question. Believe me, I’m just some goofy guy in front of a computer. If I can learn this stuff, so can you. As I begin my second year in GreenSockLand, I’m looking forward to learning more, seeing everyone’s work and answering as many of your questions as I can. This is an amazing community and I encourage anyone reading this to set up an account and get involved. My best to all of my fellow GreenSockers. See you around the forums. - Craig (PointC) PS I made a little CodePen to commemorate my one-year forum anniversary. It’s how I felt before and after discovering the power of GSAP. Enjoy.
  2. Scrollmagic

    Hi @Ilse , There are a few problems to correct. First, you've got really old versions of GSAP, jQuery and ScrollMagic. It's always best to use the latest version of everything. The reason the tween was triggering immediately is you were missing the GSAP plugin for ScrollMagic. It allows ScrollMagic to take control of the tweens. More info here: http://scrollmagic.io/docs/animation.GSAP.html Here's a fork of your pen with current scripts and the addition of that extra plugin. Hopefully that helps. Happy tweening.
  3. animated text challenge

    Are you referring to the morph at the beginning or that text that appears from nowhere? If it's the morph, @Jonathan's info should take care of it for you. If it's the text appearing from nowhere, I'd do it exactly like they do on the website. Put the text in a div and set the overflow to hidden. You would also have the option of using a mask or clip-path, but in any case, you have to hide it behind something. Happy tweening.
  4. "from" animation wrong behavior

    @CarlI was wondering if you intended to scold that demo.
  5. Click on screen then slide out

    Hi @cheezheadsrule Welcome to the forum. I'm not entirely sure I understand what you're trying to accomplish and if it even relates to GSAP, but you can do a quick search of the forum for 'sliders' and you'll find many threads. You could also search CodePen for image sliders and you'll find many examples that should help you get started. https://codepen.io/search/pens/?q=image slider&order=popularity&depth=everything&show_forks=false If you have any GSAP related questions about your project, we're happy to help. Please provide a CodePen demo with any questions. More info about that: Happy tweening.
  6. Animation Circle yoyo

    Hi @alessio Welcome to the forum. You just need to add transformOrigin to your tween so the element scales from the middle like this: TweenMax.fromTo('.test', 0.6, {scale: 1}, {scale: 1.1, transformOrigin:"center center", repeat: -1, yoyo: true}); More info here: https://greensock.com/docs/Plugins/CSSPlugin#transformOrigin Hopefully that helps. Happy tweening and welcome aboard.
  7. Stagger groups of paths

    Hi @Anya Welcome to the forum. Looks like @GreenSock beat me to it, but I'll throw out my two cents for you. When I have several groups in which I want the child elements to stagger and they're all the same, I usually just use a loop. Not that it's any better than a reusable function -- just another option. Happy tweening and welcome aboard.
  8. vertical round carousel

    Hi @Raistlin That's a nice effect. Are you asking if that website uses GSAP or just how to make something like it in general? As far as I can tell, they're using CSS transitions. This would normally fall outside the scope of GSAP support, but coincidentally I'm in the middle of creating something quite similar for some interactive infographics so I'll show you what I'm doing. I'm using SVGs in my project, but you can do it with some plain old divs too. The secret is setting the origin point for the divs so they go around the circle correctly. That website is using a pretty big parent circle (3000px) so they set the origin point of the divs to the center of that circle (1500px) and then rotate them. The fade at the top and bottom is accomplished with an additional div over the top of everything with a gradient background image that's transparent in the middle. Here's a basic example of what you could do: I'm manually setting the start rotation of each box with a set() tween, but if you had a lot of elements, you could get them to their starting positions with a loop too. To get the infinite part to work, I simply set() the rotation of each box back to the beginning as it drops down out of view. I just use a simple counter to pick which box is set back to the beginning and when the counter reaches 1, I reset it back to 6. Again, the fade-out at the top and bottom is created with a gradient div over the top of everything. There would be other ways to approach this, but this is how I'd do it. Hopefully it gives you a starting point. Happy tweening and good luck with your project.
  9. Horizontal Scroll with ScrollMagic + GSAP

    I'm not sure what's required here, but using ScrollMagic for a horizontal scroll isn't much different than vertical. I've forked @Dipscom's pen and added the indicators. They're indented, named and each have unique colors so you can see what's happening. I've also randomly changed some durations, offsets and trigger hooks just so you can see what's possible. Again, I wasn't part of any other private conversation so I'm not sure if this even helps. As a side note, this is one of the main reasons it's best to ask questions in the public forum rather than privately. The more eyes that are on a problem, the better. Happy tweening and scrolling.
  10. SVG Rotation bug(?) - Apple specific

    I'd definitely echo @GreenSock's advice and convert that to a path. I've fought with many circle animations and that is the easiest approach. (You can also convert it to a path before exporting from your vector software if you like.) I started a thread last year about SVG circle fun in the various browsers. It may be of interest to you. Happy tweening.
  11. convergence / divergence of svg elements

    Hi @ericshew I think the easiest approach would be to use the x/y attributes. Here's a fork of your pen with that possibility. That works well for circles(cx/cy) and rectangles, but you can also get the BBox of paths and loop through for those as well. We had a similar question here: Here's the demo I made as an answer to that question. Hopefully that all helps. Happy tweening.
  12. How to "trim" a timeline ?

    Hi @multivac If I understand your question correctly, you just want this repeating background animation and foreground animation to loop seamlessly using DevTools? If that's the case, I'd recommend making your repeating background animation a regular tween rather than an infinitely repeating timeline. You can then create the other foreground animation as a tween or timeline. So maybe something like this? I'm not 100% sure I understand your question/desired outcome so that may not be the exact solution you need, but hopefully it provides you with some ideas. Happy tweening.
  13. Controlling Speed of Tween

    I'm not sure if it will help with what you're doing, but the ThrowPropsPlugin has a track() method that will allow you to track velocity. https://greensock.com/docs/Plugins/ThrowPropsPlugin Happy tweening.
  14. Weird easing behavoir

    Thanks for the clarification @Carl. I always seem to forget that some eases are included with TweenLite. Probably because I always use TweenMax.
  15. Hi @vicmortelmans Welcome to the forum. I'm not sure I completely follow your question, but I'm wondering if you may need to use an offsetY value to have both tweens play at the same time. You mentioned that it all works right if the first tween finishes before the second starts so if you can use the starting height value of that contentToHide element as a y offset in your scroll tween it may work for you. More info in the docs: https://greensock.com/docs/Plugins/ScrollToPlugin I'm just guessing based on the code you posted, but if you could create a demo, it would be much easier to troubleshoot the issue. Here's some info about that: Happy tweening and welcome aboard.
  16. Weird easing behavoir

    Hi @hemmoleg Welcome to the forum. I see you're using TweenLite so perhaps you didn't load the EasePack? Another thing to check is if you've put the ease in the correct place in your tween vars? Here's a simple pen with a few different eases. My pen loads TweenMax which also loads the EasePack, but if you're loading TweenLite only, you need to load the EasePack too. TweenMax loads: TweenLite TweenMax TimelineLite TimelineMax CSSPlugin AttrPlugin RoundPropsPlugin DirectionalRotationPlugin BezierPlugin EasePack If you have other questions, a demo is most helpful in getting you the best answers. Hopefully that helps. Happy tweening.
  17. GSAP: 1000 Posts

    CommaClub is a real thing. You just have to follow the rules. 1st Rule: You do not talk about COMMA CLUB. 2nd Rule: You DO NOT talk about COMMA CLUB. For anyone missing the joke -- check out one of my all-time favorite films: 'Fight Club'. It's the perfect feel-good movie for the holidays. Merry Christmas everyone!
  18. GSAP: 1000 Posts

    Congratulations @Dipscom -- your membership in the comma club includes this fancy t-shirt. Only 999,000 more posts to get into the two comma club.
  19. Using Throw Props with scrolling

    Sheesh, I'm AWOL for a few weeks and @Diaco returns. I'm missing all the big events around here. Welcome back @Diaco - good to see you.
  20. morph responding to hover

    Hi @ericshew The most noticeable problem is line 19. //Switch this tl.reversed() ? tl.play() : tl.reversed(); //to this tl.reversed() ? tl.play() : tl.reverse(); That should get everything working for you. It can certainly work with playing and reversing the timelines like that, but you'll see some harsh morph jumps when hovering on/off quickly between <li> tags. You could get some smoother morphs with rapid hovering like this: Just my two cents worth. Hopefully that helps. Happy tweening.
  21. GSAP: 1000 Posts

  22. Negative delay on Timeline

    Hi @Joooonatan Welcome to the forum. If you start a timeline with a negative delay, I'm pretty sure you'll rip a hole in the space-time continuum. Actually, I think you may be looking for the position parameter. If you add those nested timelines to a master timeline, you can start them at labels, hard-coded times or relative to their normal start time. It could be something as simple as this. var tl1 = new TimelineMax(); var tl2 = new TimelineMax(); var master = new TimelineMax(); tl1.to(someElement, 20, {...}); tl2.to(anotherElement, 10, {...}); master.add(tl1); master.add(tl2, 10); That would start tl2 at the 10 second mark on the master timeline. That's just the basics of the powerful position parameter. Check out this post for more info and a better understanding. https://greensock.com/position-parameter You should also look at creating your timelines in functions and returning them for use on a master timeline. Here's @Carl's recent article to show you how it's done. https://css-tricks.com/writing-smarter-animation-code/ Hopefully that helps. Happy tweening and welcome aboard
  23. Morph Curved Shape into Straight Rectangle

    Just to throw my two cents worth out there for you -- MorphSVG is absolutely amazing and one of the best parts is not needing the same number of start and end points. That being said, if you carefully prepare your artwork and use the same number of points as often as possible, it will help the plugin and you'll experience far fewer surprises. That's what I did on my recent "Need for Speed" demo. I started with text turned into paths and used a duplicate set of those paths to push and pull their points into the shape of the car. Most of the letters use the same number of start and end points, but I did have to add a few to match some of the curves. Happy tweening and morphing.
  24. Hi @Duo Welcome to the forum and thanks for being a Club GreenSock member. Your .from() tweens that are animating the lines with drawSVG are using two sets of vars. Looks to me like you probably want a .fromTo() tween in there. https://greensock.com/docs/TweenMax/static.fromTo() If you have other questions, a CodePen demo is the best way to get answers. More info: Hopefully that helps. Happy tweening and welcome aboard.
  25. svg finger animation

    Hi @Johny13 If it were me, I'd create a second version of the finger (or entire hand) with the pointer finger bent towards the screen and then morph between the two versions with MorphSVG: https://greensock.com/morphSVG You could do it without a morph too. Make each section of the finger its own piece and pivot around the joints. If you want to use a morph and are using AI for your vector work, check out the new Puppet Warp Tool. It makes this kind of thing pretty easy. https://helpx.adobe.com/illustrator/using/puppet-warp.html Just an FYI -- the MorphSVG plugin is part of Club GreenSock. More info: https://greensock.com/club Happy tweening.