Jump to content
GreenSock

PointC last won the day on June 18

PointC had the most liked content!

PointC

Moderators
  • Posts

    4,959
  • Joined

  • Last visited

  • Days Won

    400

Everything posted by PointC

  1. I was a little confused by the question as well. Are you asking about morphing back to the original shape? I don't know if this will be of any help, but here's an older pen of mine that morphs through a series of shapes and then back to the original. http://codepen.io/PointC/pen/yejGvb/ Happy tweening.
  2. Hi NeedHate If I understand your question correctly, I think you need to look at the position parameter. It will allow you to start tweens at an absolute time or label as well as relative to the end of a timeline or label. Please see this blog post for a deeper understanding http://greensock.com/position-parameter If you have lengthy timelines that need to start at the same time, you can also build them separately and add them to a parent timeline. Here's a pen I made as an answer to another forum question but it shows the basic mechanics of nesting timelines. http://codepen.io/PointC/pen/obyJEM Hopefully that helps. Happy tweening.
  3. Hi phantomboogie I think I see where the confusion is coming from. You have a zero duration tween to set some properties and are setting that to start at a time of 0, but the tween that follows it will still just play in sequence rather than also starting at a time of 0. I think it might be easier to use set() for those initial positions like this: var tweenTl = new TimelineMax(); tweenTl //set starting positions .set('#head', {y: "0", transformOrigin: '50% 100%'}) .set('#eye', {x: "30px", y: "50px", scale: 0, transformOrigin: '50% 70%'}) //first part .to('#head', 0.7, {y: "-72", ease: Back.easeOut}) //second part .to('#eye', 0.7, {x: "20px", y: "35px", scale: 1, ease: Back.easeOut},0); Here's a fork of you pen with that solution: http://codepen.io/PointC/pen/qqYjKz?editors=0010 Hopefully that helps a bit. Happy tweening.
  4. Is this the same question that Blake has been trying to help you with in this thread? http://greensock.com/forums/topic/15370-draggable-choose-choose-only-move-to-down/ I'm confused about your desired outcome. You asked about dragging an object that stays fixed and a new target drags? onPress and onDrag are two different events. Are you asking about using the onPress as some sort of toggle? If you could provide a simplified CodePen and some more details, I think we can help you. It doesn't have to be anything with images either. Just a couple plain divs and what you want to happen would be great. Thanks.
  5. Yes - you could force the first animation to finish before allowing the user to scroll. Simply set the body overflow to hidden in your CSS and then use an onComplete callback to set the overflow back to visible when the intro timeline has finished. You could do it like this: var intro = new TimelineMax({onComplete: function() { TweenMax.set("body", {overflow:"visible"}) } }); Here's a fork of your pen with that solution applied to it: http://codepen.io/PointC/pen/wzLmKm I slowed down your scene1 timeline so you can more easily see what's happening. Happy tweening.
  6. Hi LazyRectangle Welcome to the GreenSock forums. It's always good practice to have a fallback for those scenarios. You can set up a check if the user has JavaScript disabled and if they do you can set the height of the nav bar via your CSS. Modernizr makes that pretty easy for you. https://modernizr.com/ You can also use a <noscript> tag to display a message for those users as well. Hopefully that helps a bit. Happy tweening and thanks for being a Club GreenSock member.
  7. Hi d0minium Welcome to the GreenSock forums. Your intro animation doesn't finish because your intro and scene1 timelines are both targeting the .eye class. The intro animation starts playing immediately, but as soon as you scroll to the scene1 trigger, you start the scene1 timeline which then takes control of the .eye element and starts animating it. You're basically starting a fight for control with two timelines trying to animate the same element. Hopefully that makes sense. Happy tweening.
  8. Hi Jeff Pang Welcome to the GreenSock forums. Your pause() isn't working because you're not playing the tl timeline. When you use the tweenFromTo() method, you're creating a new tween that scrubs the timeline. You have a couple options to get the correct behavior. Since you're playing the timeline from start to finish anyway, the easiest would be to change line 13 in your pen to simply play() the tl timeline: //switch this: tl.tweenFromTo("start","end"); //to this: tl.play(); If you want to use the tweenFromTo() method so you can play from label to label, you'll need to create a reference to the new tween so you can control it. In your start button function you can create a reference to the new tween like this: yourReference = tl.tweenFromTo("start","end"); Then change your pause button function to this: yourReference.pause(); Here's a fork of your pen with the second option: http://codepen.io/PointC/pen/738a5b1a5ab18f00238350de686ff925/ More reading about the tweenFromTo() method. http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/tweenFromTo/ Hopefully that helps and makes sense. Happy tweening.
  9. Happy to help. That's how we roll in the GreenSock neighborhood.
  10. Hi Caroline_Portugal If I understand your question correctly, it looks like you don't need to recreate the animation on a resize event. It seems you want it to play or not depending on the screen size. If that's the case, you don't need to kill() the animation, but rather play() or pause() it depending on the screen size. You can put all your screen size logic into a function and call it when the page loads and call it again when the screen is resized. Here's a fork of your pen with that solution. http://codepen.io/PointC/pen/RGmdVx/ Hopefully that helps a bit. Happy tweening.
  11. PointC

    Smooth Morph SVG

    Hi carleaql Something you could try would be to add easing to each part of your morph. Since you have a linear ease on your pen, it seems to stop and start into the next move rather abruptly. By adding a simple in/out ease to each step you can have a little more organic looking animation. You can play with various Powers until you find one that you like. It's not perfect, but might work for you. Here's a fork of Carl's pen. I just duplicated the SVG and timeline so you could see a side by side comparison of the difference. http://codepen.io/PointC/pen/wzkEzr/ Hopefully that helps a bit. Happy tweening.
  12. This looks like a duplicate post so I'll lock this one. Carl provided an answer here: http://greensock.com/forums/topic/15331-draggable-with-snap-swipe-scroll-section/
  13. Hi pauljohnknight Looks like you're targeting the entire svg instead of the path. You can correct that by making the following change: //switch this var mySVG = $('#svgTwo'); // to this var mySVG = $('#svgTwo path'); Everything should work correctly with that change. Happy tweening.
  14. Yep - the x was being ignored. That's the point I was making in Post #3 above, but I didn't specifically describe what the problem was. Sorry about that. Happy tweening.
  15. Hi axe-z Welcome to the GreenSock forums. If you like to learn be reviewing code, I'd suggest taking a look at the GreenSock Collections on CodePen. http://codepen.io/GreenSock/collections/popular/ As far as more advanced demos, there are a lot of talented people to follow on CodePen. Please take a look at some of the best: Blake Bowen http://codepen.io/osublake/ Sir Jonathan Marzullo http://codepen.io/jonathan/ Chris Gannon http://codepen.io/chrisgannon/ Sarah Drasner http://codepen.io/sdras/ Diaco http://codepen.io/MAW/ Hopefully that helps a bit. Happy tweening and welcome aboard.
  16. Hi qarlo Please try a little change in your tween: //switch this .set('.one', {css: {visibility: 'hidden'}, x: 100}) //to this .set('.one', {visibility: 'hidden', x: 100}) Making that change should give you the desired outcome. Please keep in mind that you can't animate visibility. It's either hidden or visible. As Jonathan suggested, please use autoAlpha or opacity. Happy tweening
  17. well... bummer I thought maybe that would help. I'm not much of an expert with the SplitText plugin so please stand by. Someone should be along shortly with some more information. Happy tweening.
  18. PointC

    Section slides

    Hi senna The problems you're experiencing mainly come from the CSS. I set your parent container to a height of 100vh so the other divs know what 100% height means. The slides should use absolute positioning rather than a float. Then position them at left: 0,25%, 50%, and 75% of their parent container so they're ready to scroll into view. Here's a fork of your pen that looks like it's working properly to me: http://codepen.io/PointC/pen/JROqEA/ Just my 2 cents worth here, but I'm not sure ScrollMagic is the best choice for this animation. It can certainly work, but you should take a look at a couple of Diaco's demos to see other approaches that offer more flexibility: http://codepen.io/MAW/pen/XmozON http://codepen.io/MAW/pen/yYradO Hopefully that helps a bit. Happy tweening.
  19. Hi george_43841 Welcome to the GreenSock forums. Your question reminded me of another thread about using emoticons with SplitText. Perhaps it could be of some help: http://greensock.com/forums/topic/13427-emoticons-in-splittext/ Happy tweening and thanks for being a Club GreenSock member.
  20. Ha! "Kim Jong Dipscom" is awesome! As the Old Klingon Proverb goes: "Revenge is a dish best served cold."
  21. I made a CodePen once where that feature would have been nice, but in the real world I'd tend to agree and say this would be something only a few would use on a regular basis. Just my 2 cents worth though.
  22. Hi redrooster Since you will have several of these, I'd recommend jQuery each() to create a timeline for each element which can be played on hover. You mentioned not needing the animation to reverse on mouseout so I used a mouseenter instead of a hover. I also added an isActive() check when the mouse enters the div so the animation won't start over with rapid hovers in/out. Finally, I added a data div to indicate the index of the element you just hovered over. Here's a fork of your pen with my solution: http://codepen.io/PointC/pen/ALbpPb/ Hopefully that helps a bit. Happy tweening.
  23. Hi bomortensen Welcome to the GreenSock forums. The easiest way to animate a dashed line with the drawSVG plugin is by using a mask. I wrote about that technique in our ongoing 'SVG Gotchas' thread here: http://greensock.com/forums/topic/13681-svg-gotchas/?p=57942 Hopefully that helps a little bit. Welcome aboard and thanks for being a Club GreenSock member. Happy tweening.
  24. Hi senna You're just missing one file. Please add this to your pen: https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js That should get you working correctly. More info on that plugin can be found here: http://scrollmagic.io/docs/animation.GSAP.html Happy tweening.
  25. Hi Nickzilla SVG circles always start at the 3 o'clock position so you'll need to rotate it by -90 degrees. You could do that by transforming the circle like this: <circle class="circle-fill" cx="50" cy="50" r="40" transform="rotate(-90 50 50)" stroke="blue" stroke-width="4" fill="none" /> or rotate the entire SVG like this: TweenMax.set("svg", {rotation:-90}); Hopefully that helps a bit. Happy tweening.
×