[How to randomise and swap multiple colours repeatedly?]

Thanks, Andy! I should've known it was something that simple.💡

[How to randomise and swap multiple colours repeatedly?]

I am experimenting with an array of colours in a single tween. I think I'm heading towards the right direction so far, as you can see the colours change on load. I did it by applying Math.round to calculate and randomise the different colours inside a single tween, and have it on repeat to see how it goes back and forth between the original colours and random colours.  

 

What I want to do now is to keep swapping colours per each circle multiple times. The only way I could achieve this if I copy and paste the same tween every time, but there has to be a better and tidier way to achieve this than repeating the same tween over again. I was thinking maybe I need to write a function with random values and call it on the tween, but I tried that using another test on my local computer but it didn't work.

What do you all reckon?

See the Pen zYLbJKG by DavidRizzo (@DavidRizzo) on CodePen

[3D shapes with CSS and GreenSock]

Hi there, thanks for the response, I appreciate the confirmation about my decision to use rotation instead of scaling.

 

My only query - and I realise this might be more of a CSS issue rather than a GSAP one - is rendering the circle shape so the white fill has a bit of width. I want to make it similar to a coin, but at the moment, the div container holding the white fill colour is too thin.

[3D shapes with CSS and GreenSock]

I'm trying to experiment with these 3D shapes I've created and using simple animations in GreenSock. I reckon I've made a good start, but I have a feeling this can be improved. For instance, while I was able to recreate the box (albeit one side doesn't seem visible with the rest of the box), I don't think I've gotten the hang of the circle. I can't really thicken the white fill colour without widening the gaps of the front and back blue sides.

 

I've noticed using the scale tween property distorts the shapes instead of rotating them, so I had to use the rotation tween property instead. Am I doing something wrong, or is that a real limitation when tweening transformed objects?

 

Any suggestions and advice would be greatly appreciated.

See the Pen poegxOG by DavidRizzo (@DavidRizzo) on CodePen

[Handwriting effect not working]

😬 I'm embarrassed I kept overlooking this. Thanks again Craig, now I totally get it! 👍

[Handwriting effect not working]

Work got me preoccupied over the last few days, but I'm giving that example a try. I'm astounded I still can't get this mask animation to work.

 

See the Pen rNjZLga by DavidRizzo (@DavidRizzo) on CodePen

[Handwriting effect not working]

@PointC, I've realised that the SVG I'm exporting isn't converting the stroke paths. I've made sure that I've outlined and intersected all shapes, but it keeps exporting all vector objects as fill paths. It's frustrating. Without the stroke paths, nothing will animate.

 

Do you know common mistakes people make when they try to convert strokes from Illustrator? 

 

See the Pen jOyzVog by DavidRizzo (@DavidRizzo) on CodePen

[Handwriting effect not working]

Hi @PointC, what is the name of that caligraphy font you use? Thanks.

[Handwriting effect not working]

I've been trying to follow this tutorial to create this handwriting effect, but I can't get it to work. 

 

https://css-tricks.com/how-to-get-handwriting-animation-with-irregular-svg-strokes/

 

Either I haven't embedded the DrawSVG library source, I made a mistake on the GreenSock code, or more than likely, I didn't create and export the stroke paths properly. What do you think?

See the Pen qBRPLgj by DavidRizzo (@DavidRizzo) on CodePen

[Stop two timelines repeating after first loop in slider carousel]

Hi, I'm using a custom slider carousel template to build a mobile banner for this ad platform, which is mostly built in jQuery and JavaScript, and I'm trying to make the tweens on frames 2 and 3 (timeline variables are called f2Timeline and f3BorderTimeline) animate the first time the slider plays on screen, but then keep them static and prevent them from repeating as the slider loops.

 

I think I'm nearly there, but the tweens animate continuously. What I've done so far is I've called a function called "checkFrame()" that animates the tweens according to the frame number, and then have the function declared inside the last conditional statement of the "goSlide" function . I think I might have to write another conditional statement to determine what should happen when the variable "slideCount" is triggered more than once, but I've tried it,  and I still can't work it out.

 

/**
 * Customise product click throughs here
 */
var STANDARD_BANNER_URL = "https://playground.xyz";
var SUPER_SKIN_HERO_URL = 'https://playground.xyz';

/************************** DO NOT EDIT BELOW **************************/
var superSkin = new xyz.superSkin({
  version: 2
});
var docs = superSkin.docs;

var bannerClickUrl = xyzContext.tokens.bannerClick || STANDARD_BANNER_URL;
var heroClickUrl = xyzContext.tokens.heroClick || SUPER_SKIN_HERO_URL;

// Slider vars
var TRANSITION_SPEED = 400;
var AUTO_SLIDE_INTERVAL= 3500;
var f2Timeline = new TimelineMax();
var f3Timeline = new TimelineMax();
//var f3Timeline = new TimelineMax();

/************************** DO NOT EDIT ABOVE **************************/


superSkin.on("banner", function() {
  superSkin.clickArea($('body', docs.banner), bannerClickUrl, "Banner click");
});

superSkin.on('launch', function() {

  /** ** SLIDER SCRIPT  ****/

  // DEPENDENCY on the presence of correct class names on slider elements in html, see Selector below

  // 1. Basic object for our stuff
  var slider = window.slider = {};

  // 2. Settings
  slider.sliderPanelSelector = '.slider-panel';
  slider.sliderPaginationSelector = '.slider-pagination';
  slider.sensitivity = 25; // horizontal % needed to trigger swipe

  // 2. Placeholder to remember which slide we’re on
  slider.activeSlide = 0;

  // 3. Slide counter
  slider.slideCount = 0;

  // 4. Initialization + event listener
  slider.init = function(selector) {
    // 4a. Find the container
    slider.sliderEl = superSkin.docs.hero.querySelector(selector);

    // 4b. Count stuff
    slider.slideCount = slider.sliderEl.querySelectorAll(slider.sliderPanelSelector).length;

    console.log('slideCount', slider.slideCount);

    $('#slider', docs.hero).css('width', (slider.slideCount * 100) + '%');

    // 4c. Populate pagination
    var n = 0;
    for (n; n < slider.slideCount; n++) {
      var activeStatus = n == slider.activeSlide ? ' class="is-active"' : '';
      slider.sliderEl.parentElement.querySelector(slider.sliderPaginationSelector).innerHTML += '<div ' + activeStatus + '></div>';
    }

    // 4d. Set up HammerJS
    var sliderManager = new Hammer.Manager(slider.sliderEl);
    sliderManager.add(new Hammer.Pan({
      threshold: 0,
      pointers: 0
    }));
    sliderManager.on('pan', function(e) {
      // 4e. Calculate pixel movements into 1:1 screen percents so gestures track with motion
      var percentage = 100 / slider.slideCount * e.deltaX / window.innerWidth;

      // 4f. Multiply percent by # of slide we’re on
      var percentageCalculated = percentage - 100 / slider.slideCount * slider.activeSlide;

      // 4g. Apply transformation
      slider.sliderEl.style.transform = 'translateX( ' + percentageCalculated + '% )';

      // 4h. Snap to slide when done
      if (e.isFinal) {

        // Log an engagement
        superSkin.tracking.engagement('hero', {
          event: {
            label: 'Swipe'
          }
        });

        if (e.velocityX > 1) {
          slider.goTo(slider.activeSlide - 1);
        } else if (e.velocityX < -1) {
          slider.goTo(slider.activeSlide + 1);
        } else {
          if (percentage <= -(slider.sensitivity / slider.slideCount))
            slider.goTo(slider.activeSlide + 1);
          else if (percentage >= (slider.sensitivity / slider.slideCount))
            slider.goTo(slider.activeSlide - 1);
          else
            slider.goTo(slider.activeSlide);
        }
      }
    });
  };


  // 5. Update current slide
  slider.goTo = function(number) {
    // 5a. Stop it from doing weird things like moving to slides that don’t exist
    if (number < 0)
      slider.activeSlide = 0;
    else if (number > slider.slideCount - 1)
      slider.activeSlide = slider.slideCount - 1;
    else
      slider.activeSlide = number;
    
//     if (number > 0)
//        f2Timeline.stop(); 
    // 5b. Apply transformation & smoothly animate via .is-animating CSS
    var percentage = -(100 / slider.slideCount) * slider.activeSlide;

    $(slider.sliderEl).transition({x: percentage + '%'}, TRANSITION_SPEED);

    // 5c. Update the counters
    var pagination = slider.sliderEl.parentElement.querySelectorAll(slider.sliderPaginationSelector + ' > *');
    var slides = slider.sliderEl.parentElement.querySelectorAll(slider.sliderPanelSelector);
    var n = 0;
    for (n; n < pagination.length; n++) {
      var className = n == slider.activeSlide ? 'is-active' : '';
      var slideClass = n == slider.activeSlide ? 'slider-panel is-active' : 'slider-panel';
      pagination[n].className = className;
      slides[n].className = slideClass;
    }
  };

    slider.init('#slider');

  var autoplay = setInterval(goSlide, AUTO_SLIDE_INTERVAL);

  function goSlide() {
    if (slider.activeSlide === slider.slideCount - 1) {
      slider.goTo(0);
    } else {
      slider.goTo(slider.activeSlide + 1);
      checkFrame();
      console.log('test everything');
    } 
  }
  
  function checkFrame() {
    // if (slider.slideCount > 0) {
    if (slider.activeSlide === 1 && slider.slideCount > 1) {
      f2Timeline.add(new TweenMax.fromTo(roundel, 0.3, {scale:0}, {scale:1, ease:Back.easeOut, delay:0.5}));
      f2Timeline.add(new TweenMax.fromTo(roundelCopy1, 0.3, {scale:0}, {scale:1, ease:Back.easeOut}));
      f2Timeline.add(new TweenMax.fromTo(roundelCopy2, 0.3, {scale:0}, {scale:1, ease:Back.easeOut}));
      console.log('frame 2');
    } else if (slider.activeSlide === 2 && slider.slideCount > 1) {
      f3Timeline.add(new TweenMax.fromTo(topF2, 0.3, {scaleX:0}, {scaleX:1, ease:Power2.easeOut, delay:0.5}));
      f3Timeline.add(new TweenMax.fromTo(vertBorder, 0.2, {scaleY:0}, {scaleY:1, ease:Power2.easeOut}));
      f3Timeline.add(new TweenMax.fromTo(horizBorder, 0.2, {scaleX:0}, {scaleX:1, ease:Power2.easeOut}));
      f3Timeline.add(new TweenMax.fromTo(insetBox, 0.3, {y:-100}, {y:0, ease:Power2.easeOut}));
      f3Timeline.add(new TweenMax.fromTo(copy3, 0.3, {y:-100}, {y:0, ease:Power2.easeOut}));
      console.log('frame 3');
    }
}    
  
  function turnOffAnimation() {
    f2Timeline.stop();
  }
  
  $('.slider', docs.hero).on('touchstart', function(){
    clearInterval(autoplay);
  });

/** ** END SLIDER SCRIPT  ****/

  //HERO CLICK AREA
  superSkin.clickArea($('body', docs.hero), heroClickUrl, 'Hero click');
  

Any ideas? Cheers.

[How to twinkle stars in a random manner?]

Hello @OSUblake, thanks for the reply and example. Much appreciated.

 

I see you added a class for each image, and used the query selector to call the class as a variable and connect it to a for loop. Fascinating. I'll definitely need to read more of how these Math.floor and random values work. Still need to brush up on those aspects in JS.

 

It's definitely close to what I had in mind, so thanks once again!

[How to twinkle stars in a random manner?]

Hey everybody!

 

I've wanted to make this effect where I'm twinkling two stars, but as you can see in my embedded Codepen at the time of writing, I could only have them animate once at a time. 

 

I want to know if it's possible to have both of these objects animate in a manner which is a split second after each other, e.g. first star fades in and out and then the second star fades in and out, and repeat. Thanks.

See the Pen oeMreo by DavidRizzo (@DavidRizzo) on CodePen

[Is this a good way to loop an animation?]

Thanks for the feedback, guys. I appreciate the response.

[Is this a good way to loop an animation?]

Hi everybody, first time posting here.

 

I've created this example on CodePen to loop a certain part of an animation consisting two frames. I did this by declaring two variables as two separate timelines (TimelineLite and TimelineMax), and then called the function to replay the second frame only.  You can take a look at how I wrote this by referring to the CodePen link.

 

I'm still learning both GreenSock and JavaScript, and I feel I've come a long way, but I'd like to know is there a better way to code this without using multiple timelines? Even though I'm satisfied with how the code works, I'm open to feedback if there is a neater way to write this code.

See the Pen WOQXPa by DavidRizzo (@DavidRizzo) on CodePen