Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by drNo77

  1. 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.

  2. 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

  3. @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

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




    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

  5. 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);
      // 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;
          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;
      var autoplay = setInterval(goSlide, AUTO_SLIDE_INTERVAL);
      function goSlide() {
        if (slider.activeSlide === slider.slideCount - 1) {
        } else {
          slider.goTo(slider.activeSlide + 1);
          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() {
      $('.slider', docs.hero).on('touchstart', function(){
    /** ** END SLIDER SCRIPT  ****/
      superSkin.clickArea($('body', docs.hero), heroClickUrl, 'Hero click');

    Any ideas? Cheers.

  6. 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! :)

    • Like 2
  7. 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

  8. 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