Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 08/19/2017 in all areas

  1. Glad to hear you got it working @SLSCoder Just FYI - you can make an image part of the SVG and align it to the path. One of the big advantages of that is the image will scale perfectly with the SVG. Here's another fork of your project. I've removed the width and height attributes from the SVG so it will scale up and down. See how the .png works nicely with that scaling? Thanks again for being a Club member and let us know if you have additional questions. Happy tweening.
    3 points
  2. Hi and welcome to the GreenSock forums. Thanks for the demo. There were a few little problems. hover() is deprecated in the version of jQuery you are using HTML you have class"beerRight" (missing =) instead of class="beerRight" in JS you are using beerright instead of beerRight beerRight should be working below. I took out beerLeft as I was troubleshooting. In general it is a little troublesome having an object move away on mouseenter as it can trigger a mouseleave (depending on where the mouse is and how far the object moves)
    3 points
  3. If you don't want to use TweenMax, you could also look at exportRoot() and control the timeScale that way too. More info: https://greensock.com/docs/TimelineLite/static.exportRoot() Happy tweening.
    3 points
  4. Just to follow up. You can make an image follow the path, but it's tricky if the image is not sitting at 0,0. Like this: You'll save yourself a lot of headaches by making the target a part of the SVG. Happy tweening.
    3 points
  5. Hi @hackfin They run faster on subsequent plays because you're setting .timeScale(3) on line 39 when you reverse. If you'd like them all to play at a timeScale of 3 just add that timeScale to the play on line 33. If they should run slow on play and fast on reverse you can just set the play timeScale back to 1 on line 33. Does that help? Happy tweening.
    3 points
  6. Hi @mr.x Is this what you're looking for? https://greensock.com/docs/TweenMax/static.globalTimeScale() Hopefully that helps. Happy tweening.
    3 points
  7. Hi @OSUblake, Your Pythagoras tree has brought me back to school - to my first contact with this 'phenomenon'. In fact, the visual appearance was more important to me than the underlying trigonometric theorem: both the plain formula as well as the graphic representation have a very positive aspect. Therefore - to evoke this - here the attempt of a small animation: Sure, I know you can calculate all necessary values and develop a function for random examples. But I still need a couple of days ... Kind regards Mikel Off the record: while we call it Pythagoras' Theorem, it was also known by Indian, Greek, Chinese and Babylonian mathematicians plus a small group of OSU´s well before he lived !
    2 points
  8. Thanks Carl. Yeah - I wasn't completely clear in my first response about a target using a path and aligning the target to the path in the MorphSVGPlugin.pathDataToBezier method . I think this can trip people up a bit. You can use any element and follow the path, but if you try to align a non-SVG target to the path, you will get an error. That was the case in this thread:
    2 points
  9. Hi @SLSCoder Welcome to the forum and thanks for joining Club GreenSock. The target that you're aligning to the path needs to be SVG. I used your file to make a quick pen, but I used a SVG circle instead of the red ball png. Just FYI - this is a good pen to bookmark as it has all the Club plugins for use on CodePen when you have other questions. Hopefully that helps. Happy tweening and welcome aboard.
    2 points
  10. Hi - sorry for the delay - I was wrapped up in another project. I made a new fork of the pen that allows you to change the number of panels. A couple things of note: the stage in my demo is 600px wide and the dragger travels 300px so some of the math is based on that. I put some comments in the JS so you can see where those may need to be changed for your project. You could also make those widths into variables and plug them into the Math, but that's up to you. Here's the new fork: Hopefully that helps. Happy tweening.
    2 points
  11. Hi Jack, Thanks for the quick reply, didn't expect on the weekend, sorry if I disturbed you. I decided to avoid the 'autoScroll' option at the moment, it isn't quite necassary for me at the moment, and things seem to work well now, Thanks again, Elior
    1 point
  12. That should actually only be implemented if you enable autoScroll, but there was a regression in a recent version that could cause it to show up in other situations. Sorry about that. It is indeed necessary to prop open the container when you're dragging something inside a scrollable container. It should be resolved in the upcoming release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js Does that work better for you? It was tough for me to verify in your case because you didn't provide a codepen or jsfiddle example. If you're still having trouble, that'd be super helpful (a reduced test case codepen). Thanks!
    1 point
  13. That was it. I knew it had to be something simple. Thanks for your help!
    1 point
  14. Thanks for the help Carl and Mikel! You guys clarified a lot for me
    1 point
  15. Hi @Ilse, I would like to pick up the hint of CARL. I don´t know your layout/concept, but you could define a 'hover area' as you want independent from e.g. the image. In this example the area is the #container (marked with green border): Kind regards Mikel
    1 point
  16. Sorry ohem, I didn't want to steal Your solution. I was in a hurry and I thought Gumbo want something different when he wrote I found a broken codepen in his post ( as I remember ) and forked it and fixed it which became almost exactly like Yours. My 2 likes goes to You
    1 point
  17. Isn't that the same thing I did?
    1 point
  18. Thanks very much Oliver16Years, exactly what I needed.
    1 point
  19. You could do something like this:
    1 point
  20. Yeah, I'm in the same boat as PointC. I looked at this earlier and had a tough time putting it all together. Perhaps we can just focus on one of the issues first in a pen that only has enough assets and code to illustrate that issue. Then we can build from there if other issue persist.
    1 point
  21. Oh... you meant you had a blank screen. I thought you meant my demo was blank. You're still linking to a local image. You have this on line 2 <img src="img/logo.png"> You'll see my image has a direct link. <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/314556/hero.png" > That is my asset account on CodePen, but you can link to your own images on your server or just some test images from another server, but you can't leave it the way you have it. That's just looking in your local img folder. Make sense? Happy tweening.
    1 point
  22. Great job, Craig. Yup, the target doesn't need to be in the SVG but it does make it easier. SLSCoder, welcome to the forums. Let us know if you need more help getting started. As Craig AKA PointC mentioned its best to provide a CodePen, plunkr or jsFiddle demo so we can easily see all the moving parts, edit and provide solutions. Happy Tweening!
    1 point
  23. What's a blank screen? The CodePen? Something may be weird with that embed. Here, try a link instead. https://codepen.io/PointC/pen/OjQoVO Happy tweening.
    1 point
  24. Hi @ekfuhrmann I've read your question a few times and maybe I'm just tired, but I'm not sure I completely understand what you're asking. Do you think you could trim this demo back to just a few of the words you'd like to animate and what you expect to happen? Generally, the simpler the better. Thanks much and happy tweening.
    1 point
  25. Those pens are using a background image for that div, but have no content. You'll have to set the size of that logo div if you want it to show like that. The other problem on the CodePen is you're linking to your local file directory so no image is loading. Your original question was about animating an image with scr="" so here's a fork of your pen with a sample image in it so you can see everything is working correctly. Hopefully that helps. Just FYI - you don't need the body, head etc. tags in the HTML panel on CodePen. That's all taken care of for you. Happy tweening.
    1 point
  26. Glad you got it all figured out. The final result looks good - thanks for sharing. Happy tweening.
    1 point
  27. I might do a little more tweaking, but here's the final result:
    1 point
  28. @PointC What I just discovered is that the Rotation parameter needs to be added in ALL tweens, or it will not work. When I tried last night, I only added it to the first two tweens to test it. OK. Now we're in business!!! Thanks for the crowdsourcing on this one everybody.
    1 point
×
×
  • Create New...