Streaming live at 10am (PST)

CMS Slideshow JS: zoom in, then fade/cross dissolve transition


I believe for a seasoned developer it should be a relatively quick tweak (1-1.5hrs). Let me know if your pricing. The slideshow exists but only has a zoom effect when it first appears and when scrolls into view. I need the zoom/fade on every slide in the slideshow.

I’ll be looking for a developer moving forward for future projects. Usually translate designs to live sites and/or design and develop a final website project. I just don’t have the time anymore to dedicate, but will likely be finding more clients that have a need for website development work. You can see some of my past work:

This is the current Webflow preview site which it needs to be integrated:

The hero slideshow should behave as follows:

  1. Loading - Wait until image is loaded
  2. Image Start - bigger photo (130%) (ease out
  3. Image End - Scale to fit (100%) ease in
  4. Transition - to next slide: fade / cross dissolve

(See this website for example: )

Some advanced functions can be found here for Cycle2 script:

Script in footer code:


<script src=""></script>

<script src=""></script>

<script src=""></script>

<script src=></script>


$(document).ready( function() {

// init Isotope

var $grid = $('.grid').isotope({

itemSelector: '.item'


// layout Isotope after each image loads

$grid.imagesLoaded().progress( function() {



// store filter for each group

var filters = {};

$('.filters').on( 'click', '.button', function() {

var $this = $(this);

// get group key

var $buttonGroup = $this.parents('.button-group');

var filterGroup = $buttonGroup.attr('data-filter-group');

// set filter for group

filters[ filterGroup ] = $this.attr('data-filter');

// combine filters

var filterValue = concatValues( filters );

// set filter for Isotope

$grid.isotope({ filter: filterValue });


// change is-checked class on buttons

$('.button-group').each( function( i, buttonGroup ) {

var $buttonGroup = $( buttonGroup );

$buttonGroup.on( 'click', 'button', function() {


$( this ).addClass('is-checked');




// flatten object by concatting values

function concatValues( obj ) {

var value = '';

for ( var prop in obj ) {

value += obj[ prop ];


return value;








I can help.

You can reach me on Skype: cisin.justin or Email: so that we can discuss this further.