Popular Content

Showing content with the highest reputation on 07/16/2018 in Posts

  1. 1 point
    the basic idea is to loop through the svgs, assign each one its own animation. When you mouseenter/mouseleave you then play and reverse that item's animation. As for keeping borders static you probably will need to nest the svg in a parent with overflow:hidden this should be a good starting point for you
  2. 1 point
    probably, you could .progress(0)/seek(0) on that animation.. set() is adding zero duration tweens.. which is somehow diverges syntactically from the intention.
  3. 1 point
    Hi and welcome to the GreenSock forums and Club GreenSock! Sorry to hear you are having troubles. To load GSDevTools there are 2 steps. 1: Make sure you are loading GSDevTools into your page, most commonly via a script tag. In your example it would be like <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js'></script> <script src="js/GSDevTools.js"></script> <script src="js/index.js"></script> It doesn't matter if you load TweenMax from the CDN or locally 2: Activate GSDevTools using GSDevTools.create(); I've updated the demo you created to load and activate GSDevTools CodePen has a feature that lets you export Pens as zips so you can download and run them locally. I will PM you a version that works locally in just a minute.
  4. 1 point
    @PointC Got it! Thanks for your help. Found the solution with your answer. Found this one -> https://tympanus.net/codrops/2018/04/10/webgl-distortion-hover-effects/ - its exactly that effect. Thank you
  5. 1 point
    It looks like they're using three.js and that's the displacement map for the transition. You could make it happen with a Pixi displacement filter too. http://pixijs.io/pixi-filters/tools/demo/ http://pixijs.download/dev/docs/PIXI.filters.DisplacementFilter.html You'll want to use a Power of two image (512x512, 256x256, etc.) for the best results. Good luck with your project.
  6. 1 point
    The animation wasn't running when I called .set(). When I called .set() it wasn't able to properly reset all of the starting positions/properties the way I needed it to. It would have been a lot of work to set each individual element of my array back to the starting points. Thankfully the .pause() function saved the day by doing a lot of the heavy lifting.
  7. 1 point
    Name this index.php and place it in the same folder as skin-right.html etc. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Overview</title> <style> body{ margin: 0; padding: 0; background-color: #333; } .banner{ font-family: arial, sans-serif; background: #ccc; float: left; margin: 0; } .banner iframe{ margin: 0; float: left; } .banner h2{ font-size:12px; margin: 0; padding:10px; background-color: #000; color: #fff; line-height: 1; overflow: hidden; clear: both; display: block; } .banner a{ text-decoration: none; color: #fff; } </style> </head> <body> <div class="banner"> <iframe src="skin-left.html" width="640" height="1500" frameborder="0"></iframe> <h2><a target="_blank" href="skin-left.html">Skin left</a></h2> </div> <div class="banner" style="margin-top: 131px"> <iframe src="leaderboard.html" width="728" height="90" frameborder="0"></iframe> <h2><a target="_blank" href="leaderboard.html">Leaderboard</a></h2> </div> <div class="banner"> <iframe src="skin-right.html" width="640" height="1500" frameborder="0"></iframe> <h2><a target="_blank" href="skin-right.html">Skin right</a></h2> </div> </body> </html> Set up a server with your terminal: php -S And open your browser and go to: http://localhost:8000/index.php
  8. 1 point
    I’m looking for talented developers with high animation skills. I work for an agency specialized in developments of campaigns for big brands. These are good examples of the quality we are looking for: https://bannerboy.com/brain/?post=converse-chuck2-knit-320x480 https://bannerboy.com/brain/?post=google-gsp16-bike-300x250 https://bannerboy.com/brain/?post=duracell-gamer-halo-300x250 For more information please send me an email here with your portfolio. thanks!
  9. 1 point
    In these cases it really helps if you provide a demo. If your starting and ending gradients are formatted the same way with the same number of stops you can do something like this: http://codepen.io/GreenSock/pen/56dc377001d36c64c154cc3a120098cb?editors=1111
  • Newsletter

    Want to keep up to date with all our latest news and information?

    Sign Up