drNo77

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

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?

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.

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.

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

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. https://codepen.io/DavidRizzo/pen/rNjZLga

@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? https://codepen.io/DavidRizzo/pen/jOyzVog

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

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?

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.

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!

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.

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

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.