Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

122
Views
Tweenmax slider resizing issue after first fire

I'm having an issue with a TweenMax slider.

In particular, after the first fire basically when I resize the window the images in the div go flying, they exit out of the screen and so on: video of the issue..

This is the code I'm using to make the slider work:

function funct_tween() {
    console.log("SLIDER IMAGES EXIST NOW");
    var s = $('.slider'),
        sWrapper = s.find('.slider-wrapper'),
        sItem = s.find('.slide'),
        btn = s.find('.slider-link'),
        sWidth = sItem.width(),
        sCount = sItem.length,
        slide_date = s.find('.slide-date'),
        slide_title = s.find('.slide-title'),
        slide_text = s.find('.slide-text'),
        slide_more = s.find('.slide-more'),
        slide_image = s.find('.slide-image img'),
        sTotalWidth = sCount * sWidth;

    
    sWrapper.css('width', sTotalWidth);

    var clickCount = 0;

    btn.on('click', function (e) {
        e.preventDefault();

        if ($(this).hasClass('next')) {
            console.log("clicked next");
            (clickCount < (sCount - 1)) ? clickCount++ : clickCount = 0;
        } else if ($(this).hasClass('prev')) {

            (clickCount > 0) ? clickCount-- : (clickCount = sCount - 1);
        }
        TweenMax.to(sWrapper, 0.4, {x: '-' + (sWidth * clickCount)})

        var fromProperties = {autoAlpha: 0, x: '-50', y: '-10'};
        var toProperties = {autoAlpha: 0.8, x: '0', y: '0'};

        TweenLite.fromTo(slide_image, 1, {autoAlpha: 0, y: '40'}, {autoAlpha: 1, y: '0'});
        TweenLite.fromTo(slide_date, 0.4, fromProperties, toProperties);
        TweenLite.fromTo(slide_title, 0.6, fromProperties, toProperties);
        TweenLite.fromTo(slide_text, 0.8, fromProperties, toProperties);
        TweenLite.fromTo(slide_more, 1, fromProperties, toProperties);

    });

}

(function ($) {
    $(document).ready(function () {
            console.log("Slider function-document is ready");
            funct_tween();
        });


})(jQuery);

And this is a snippet I made to show the issue I'm having: JSfiddle Link. Does anyone know what's causing this issue?

At first I thought it could be related to the sWrapper property being called once and not on window resize, so I tried to add an event that gets fired on window resize;

$(window).resize(function () {
    funct_tween();
});

but it didn't solve the issue...

Could anyone help me out troubleshooting where is the issue at? Even just pointing me to the right direction would help me a lot.

Thank you guys in advance.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!