Jump to content

PointC last won the day on October 30

PointC had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by PointC

  1. Hi proweb1991 You may want to take a look at Petr Tichy's deconstruction of the waaark.com site: https://ihatetomatoes.net/waaark-com-website-deconstruction/ I'd also look through Blake's CodePens. He's always got cool stuff that can point you in the right direction for almost any project: http://codepen.io/osublake/ This is a recent one of his that is astounding. It's canvas instead of SVG. Vertical Line Repellent http://codepen.io/osublake/pen/vXZPxN Hopefully that helps. Happy tweening.
  2. I personally use Adobe Illustrator for all my vector work. If you have Adobe's Creative Suite, it's what I'd recommend. If you don't have access to that suite, I know quite a few people use Inkscape. It's free and open source. https://inkscape.org/en/ Happy tweening.
  3. Looks like you've got some strangeness with your paths. You may have to address those issues in your vector software and re-export. To see what I mean please try setting a temporary fill color on your #December_2004 path and watch the morph. You'll see that some of the points are crossing over each other and the fill isn't contained to the outline. Hopefully that makes sense. Happy morphing.
  4. HI ryanroehl@gmail.com As far as I know the spec doesn't allow that. Every mask is unique so it should have a unique identifier. If you can describe a reason/scenario (preferably with a CodePen) for wanting to use class instead of an ID, I might be able to point you in the right direction. Happy tweening.
  5. Hi xxboonexx I'd recommend using jQuery each() for something like that. When you have access to the index value, you can use it to control duration, delay, etc. as well as part of the animation calculations too. Please take a look at this simple example to get started. http://codepen.io/PointC/pen/EgWNqy Hopefully that helps a bit. Happy tweening.
  6. Hi ad_bel Welcome to the GreenSock forums. One of our moderators (Petr Tichy) has loads of tutorials and info about ScrollMagic. Please take a look at this demo as it's almost the same thing you're creating: https://ihatetomatoes.net/a-simple-parallax-template-using-scrollmagic-and-greensock/ Hopefully that helps a bit. Happy scrolling.
  7. My 2 cents - you could make that work with SplitText (remembering that it's a Club plugin) However, if I was doing that, I would probably create the whole thing with SVG and SplitText doesn't work with SVG text. Others may have differing opinions. Happy tweening.
  8. Hi LipstickVoid Are you asking how to do something like that with GSAP or just general advice on getting started? I think <canvas> would probably be a good choice. I'd recommend searching CodePen for ideas. Here's one I saw a few months ago: http://codepen.io/seanfree/pen/ZpPrEA/ We do keep the support focused on GSAP so if you have any questions related to the animation platform, we'd be happy to help. Happy tweening.
  9. PointC

    GSAP in Wordpress

    Glad to hear you got it figured out adbites. ...and welcome to the GreenSock forums.
  10. Hi gotaquestion Nothing is showing up in your 2nd demo because you have your #March_2010 path visibility set to hidden in your CSS. I'm not sure I completely understand your question about multiple paths. Are you asking if MorphSVG can morph a group? If so, the answer is no. It works path to path. However, you can create a loop to handle a lot of paths at one time. I made this demo as an answer to a different forum question, but you can see how a loop of paths would work : http://codepen.io/PointC/pen/LNLpgB Hopefully that helps a bit. Happy morphing.
  11. I thought you wanted some animation as the months change, but you just want the months to change based on the progress of the timeline? No animation? If that's what you need, you wouldn't need the text plugin. I'd probably just put your months list into an array and then change the HTML of the h1 span based on the progress of the timeline. We'll start with the array and get its length so we can calculate the timeline progress correctly. var months = ["April", "May", "June", "July"]; var ml = months.length; I then added two lines to your updateSlider() function: function updateSlider() { $("#slider").slider("value", maintl.progress()); var theMonth = Math.floor(maintl.progress() * 100 / (100/ml) );// check progress, convert to integer, round down $("h1 span").html(months[theMonth]);// change text in span } The first line gets the progress of the timeline and determines which array text we'll be using. Using the ml variable (length of the array) we can change the text at the correct percentages of timeline completion. For your example, you have four months so the text will change at 0%, 25%, 50% and 75%. You can add more months to the array and everything will still update correctly since we're using the ml variable for our calculations. The second line simply grabs the correct text from the array and updates the h1 span accordingly. Here's a fork of your pen. http://codepen.io/PointC/pen/rjeWBV/ I also left a console.log() in there to show the percentages as it animates. Hopefully that makes sense and helps a bit. Happy tweening.
  12. Have you seen the TextPlugin? I think it would work really well for your dates animation. https://greensock.com/TextPlugin https://greensock.com/docs/#/HTML5/GSAP/Plugins/TextPlugin/ Happy tweening.
  13. Hi gotaquestion If I understand your question correctly, you want the morph animation to play and you want a secondary animation to play at the same time? If that's correct, it sounds like nesting timelines would be the way to go. You'd create a timeline for your morph and a second one with your dates and then add those to a master timeline. Here are the basic mechanics of nested timelines added to a master: http://codepen.io/PointC/pen/obyJEM If you use the forum search feature looking for 'nested', you'll find a lot more examples and threads. If you had a CodePen for us to review, we can probably be of more help. Please see Carl's post to learn more about creating one: https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ Hopefully that gets you started. Happy tweening.
  14. Hi ochalmers You could do that with a variable. Set your variable equal to 100 (or whatever your increment will be) and then scroll the window to that point. TweenLite.to(window, 2, {scrollTo:{y:yourVariable}}); You can then add/subtract 100 from your variable as part of your click function. That should work for you. Hopefully that helps. Happy tweening.
  15. Doh! I knew that too. I'm so use to questions about those members only plugins, I went for my standard go-to answer.
  16. I'm confident the beta version would be stable for productions, but that link is for the CodePen version and it won't work outside of that environment. I'm not sure if there is an official release date for the new version, but Jack or Carl will probably see this thread and may be able to provide more information about it. Happy tweening.
  17. HI codeingLot Welcome to the GreenSock forums. I'm wondering if that is related to some draggable issues that have been discussed recently. Please see this thread: https://greensock.com/forums/topic/15736-draggable-onclick-issues-on-chrome-55-touch/ You'll see in post #3 of that thread Jack has a link to the new beta version of draggable you can try in your CodePen. Hopefully that helps. Happy tweening.
  18. Hi jknott Looks to me like the problem is coming from the third tween in your timeline. You're setting the position parameter to a relative value of "-=1.8", but that puts it before the start of the timeline. If you adjust that offset, I think you should be just fine. Happy tweening.
  19. I wonder if we could get some faster service around here? I mean, that took almost 11 hours from problem to an updated plugin. Excellent work! That's a nice addition to the plugin.
  20. That's cool Carl. I didn't know that was being considered. Is that something coming soon or is it #478 on the to do list?
  21. Hi blendingpoint Welcome to the GreenSock forums. Looks like the plugin is running into some trouble calculating the path length since you'e setting all your sizes via percentage. If you set a viewBox size and then set the rectangle to that size, it should all work fine. Please keep in mind that you don't have to set the width of an SVG to 100%. It will automatically scale to 100% of the width of its parent unless you tell it otherwise. Also keep in mind that only half the stroke will show with that setup. All strokes are aligned to the middle so a rectangle that is the full width and height of the SVG parent will cut off the outside part of the stroke. Here's a fork of your pen with those changes. http://codepen.io/PointC/pen/XpmYga Hopefully that makes sense helps a little bit. Happy tweening and welcome aboard.
  22. Hi mk1 Everything looks right to me. I didn't see any letters being left behind. Are you seeing this all browsers? Jonathan has some good examples there so hopefully those help, but if you continue seeing problems, perhaps you could give some more details. Happy tweening.
  23. If you don't want the stroke to scale, you can add the attribute: vector-effect='non-scaling-stroke' Here's a fork of Blake's pen with that change. http://codepen.io/PointC/pen/MJagGE Happy tweening.
  24. Hi again ani-g I just read your question again and I think you were asking about using a line in the effect Blake was demonstrating in the thread. I got confused when you showed some code. I think this pen by Diaco could also help you. http://codepen.io/MAW/pen/mJyZdj Happy tweening.
  25. Hi ani-g Welcome to the GreenSock forums. I'm not sure what you're asking. Are you asking if you can create SVG lines with percentages? If that's the question, yes you can. You'll need a stroke and stroke-width, but that should work fine. If you have other questions related to GSAP, could you start a new topic for us? When you add questions to another member's thread that is marked answered, it could easily get overlooked and we want to get you the best answers possible. Happy tweening.