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.