How can i make my image look wobbly like the sphere i have in my link?

Report · Apr 29, 2019

I want to create a frame by frame wobble effect for my image

so that i can animate it like this sphere

https://codepen.io/juliangarnier/pen/LMrRNW

how can achieve that?

Report · Apr 29, 2019

Hi Danielo,

I found this article quite explanatory and helpful for achieving multiple animation effects in Photoshop: https://www.smashingmagazine.com/2015/06/creating-advanced-animations-in-photoshop/

Let us know if that helps in designing your animation.

Thanks,

Akash

Report · Apr 29, 2019

It looks like whatever application they created the shere SVG with expotred it in HTML XML format as a div and is animated by the Javascript.

SVG

<defs>

</linearGradient>

</defs>

</svg>

</div>

JavaScript

function fitElementToParent(el, padding) {
  var timeout = null;
  function resize() {
    if (timeout) clearTimeout(timeout);
    anime.set(el, {scale: 1});
    var pad = padding || 0;
    var parentEl = el.parentNode;
    var elOffsetWidth = el.offsetWidth - pad;
    var parentOffsetWidth = parentEl.offsetWidth;
    var ratio = parentOffsetWidth / elOffsetWidth;
    timeout = setTimeout(anime.set(el, {scale: ratio}), 10);
  }
  resize();
  window.addEventListener('resize', resize);
}
var sphereAnimation = (function() {
  var sphereEl = document.querySelector('.sphere-animation');
  var spherePathEls = sphereEl.querySelectorAll('.sphere path');
  var pathLength = spherePathEls.length;
  var hasStarted = false;
  var aimations = [];
  fitElementToParent(sphereEl);
  var breathAnimation = anime({
    begin: function() {
      for (var i = 0; i < pathLength; i++) {
        aimations.push(anime({
          targets: spherePathEls,
          stroke: {value: ['rgba(255,75,75,1)', 'rgba(80,80,80,.35)'], duration: 500},
          translateX: [2, -4],
          translateY: [2, -4],
          easing: 'easeOutQuad',
          autoplay: false
        }));
      }
    },
    update: function(ins) {
      aimations.forEach(function(animation, i) {
        var percent = (1 - Math.sin((i * .35) + (.0022 * ins.currentTime))) / 2;
        animation.seek(animation.duration * percent);
      });
    },
    duration: Infinity,
    autoplay: false
  });
  var introAnimation = anime.timeline({
    autoplay: false
  })
  .add({
    targets: spherePathEls,
    strokeDashoffset: {
      value: [anime.setDashoffset, 0],
      duration: 3900,
      easing: 'easeInOutCirc',
      delay: anime.stagger(190, {direction: 'reverse'})
    },
    duration: 2000,
    delay: anime.stagger(60, {direction: 'reverse'}),
    easing: 'linear'
  }, 0);
  var shadowAnimation = anime({
      targets: '#sphereGradient',
      x1: '25%',
      x2: '25%',
      y1: '0%',
      y2: '75%',
      duration: 30000,
      easing: 'easeOutQuint',
      autoplay: false
    }, 0);
  function init() {
    introAnimation.play();
    breathAnimation.play();
    shadowAnimation.play();
  }
  
  init();
})();]

JJMack

Report · Apr 29, 2019

If you are using PS for this, good old fashioned frame by frame animation - you have to do it by hand.

Melissa Piccone | Adobe Trainer | Online Courses Author | Fine Artist

Report · Apr 29, 2019

You could try to skew and distort a basic shape as copies on multiple layers and then use the tween between frames, but it won't be as fluid as that example you provided. That would be better served in Adobe Animate or After Effects.

How can i make my image look wobbly like the sphere i have in my link?

Explore related tutorials & articles