Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'dynamic elements'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 2 results

  1. I'm trying to add a little parallax effect to the articles I add into my project from contentful. Even after using `this.nextTick`, it seems like the articles are loading in after the timeline initializes. Can someone help me with getting the dynamic elements to load before the timeline? I don't want to move my gsap to the updated() lifecycle hook, since that seems unnecessarily heavy.
  2. Hello there Greenies, i would need some assistance if possible. Here goes. Im working on a pack of draggable elements that are dynamically built from sqlite query. Heres my issue. If elements are manually placed in the project they are all draggable, no issues there but when the screen is populated with database created elements they are not. I have tried waiting for query to complete and fire draggable events but it wont budge. The only way i made it work is to call the script with each element and that destroyes the logic and performance like theres no tomorrow (thats prolly cause i mangled it like a butcher). Please have mercy with comments im kinda new around here. Thanks in advance, Jim. CODE: Im using this draggable script (found on codepen) var container = $("#clone-container"); var scrollBox = $("#scroll-box"); var dropPanel = $("#drop-panel"); var tiles = $(".tile"); var threshold = "10%"; tiles.each(function() { var element = $(this); var wrapper = element.parent(); var offset = element.position(); var scope = { clone : element.clone().addClass("clone").prependTo(container), element : element, wrapper : wrapper, width : wrapper.outerWidth(), dropped : false, moved : false, get x() { return getPosition(wrapper, offset).x; }, get y() { return getPosition(wrapper, offset).y; } }; scope.draggable = createDraggable(scope); element.on("mousedown touchstart", scope, startDraggable); }); // START DRAGGABLE ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: function startDraggable(event) { var tile = event.data; TweenLite.set(tile.element, { autoAlpha: 0 }); TweenLite.set(tile.clone, { x: tile.x, y: tile.y, autoAlpha: 1 }); tile.draggable.startDrag(event.originalEvent); } // CREATE DRAGGABLE :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: function createDraggable(tile) { var clone = tile.clone; var wrapper = tile.wrapper; tile.draggable = new Draggable(clone, { onPress : setActive, onDrag : collapseSpace, onRelease : dropTile }); return tile.draggable; /////// function setActive() { TweenLite.to(clone, 0.15, { scale: 1.2, autoAlpha: 1 }); } function collapseSpace() { if (!tile.moved) { if (!this.hitTest(wrapper)) { tile.moved = true; TweenLite.to(wrapper, 0.3, { width: 0 }); } } } function dropTile() { var className = undefined; if (this.hitTest(dropPanel, threshold) && !tile.dropped) { dropPanel.append(wrapper); tile.dropped = true; className = "+=dropped"; $('#myModal').modal('show'); } moveBack(tile, className); } } // MOVE BACK ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: function moveBack(tile, className) { var clone = tile.clone; var element = tile.element; var wrapper = tile.wrapper; TweenLite.to(wrapper, 0.2, { width: tile.width }); TweenLite.to(clone, 0, { scale: 1, autoAlpha: 1, x: tile.x, y: tile.y, onComplete: done }); if (className) TweenLite.to([element, clone], 0.3, { className: className }); function done() { tile.moved = false; TweenLite.set(clone, { autoAlpha: 0 }); TweenLite.set(element, { autoAlpha: 1 }); } } // GET POSITION :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: function getPosition(wrapper, offset) { var position1 = wrapper.offset(); var position2 = container.offset(); return { x: position1.left - position2.left + offset.left, y: position1.top - position2.top + offset.top }; } And this would be my database query. function onDeviceReady(){ myDB = window.sqlitePlugin.openDatabase({name: "mySQLite.db"}); myDB.transaction(function(transaction) { transaction.executeSql('CREATE TABLE IF NOT EXISTS phonegap_pro (id integer primary key, title text, desc text)', [], function(tx, result) { }, function(error) { }); }); myDB.transaction(function(transaction) { transaction.executeSql('SELECT * FROM phonegap_pro', [], function (tx, results) { var len = results.rows.length, i; $("#rowCount").html(len); for (i = 0; i < len; i++){ $("#tile-container").append(" <div class='tile-wrapper'><div class='tile'>A</div></div>"); } }, null); }); } together they look like this. function onDeviceReady(){ myDB = window.sqlitePlugin.openDatabase({name: "mySQLite.db"}); myDB.transaction(function(transaction) { transaction.executeSql('CREATE TABLE IF NOT EXISTS phonegap_pro (id integer primary key, title text, desc text)', [], function(tx, result) { }, function(error) { }); }); myDB.transaction(function(transaction) { transaction.executeSql('SELECT * FROM phonegap_pro', [], function (tx, results) { var len = results.rows.length, i; $("#rowCount").html(len); for (i = 0; i < len; i++){ $("#tile-container").append(" <div class='tile-wrapper'><div class='tile'>A</div></div>"); var container = $("#clone-container"); var scrollBox = $("#scroll-box"); var dropPanel = $("#drop-panel"); var tiles = $(".tile"); var threshold = "50%"; tiles.each(function() { var element = $(this); var wrapper = element.parent(); var offset = element.position(); var scope = { clone : element.clone().addClass("clone").prependTo(container), element : element, wrapper : wrapper, width : wrapper.outerWidth(), dropped : false, moved : false, get x() { return getPosition(wrapper, offset).x; }, get y() { return getPosition(wrapper, offset).y; } }; scope.draggable = createDraggable(scope); element.on("mousedown touchstart", scope, startDraggable); }); // START DRAGGABLE ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: function startDraggable(event) { var tile = event.data; TweenLite.set(tile.element, { autoAlpha: 0 }); TweenLite.set(tile.clone, { x: tile.x, y: tile.y, autoAlpha: 1 }); tile.draggable.startDrag(event.originalEvent); } // CREATE DRAGGABLE :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: function createDraggable(tile) { var clone = tile.clone; var wrapper = tile.wrapper; tile.draggable = new Draggable(clone, { onPress : setActive, onDrag : collapseSpace, onRelease : dropTile }); return tile.draggable; /////// function setActive() { TweenLite.to(clone, 0.15, { scale: 1, autoAlpha: 1 }); } function collapseSpace() { if (!tile.moved) { if (!this.hitTest(wrapper)) { tile.moved = true; TweenLite.to(wrapper, 0.3, { width: 0 }); } } } function dropTile() { var className = undefined; if (this.hitTest(dropPanel, threshold) && !tile.dropped) { dropPanel.append(wrapper); tile.dropped = true; className = "+=dropped"; $('#myModal').modal('show'); } moveBack(tile, className); } } // MOVE BACK ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: function moveBack(tile, className) { var clone = tile.clone; var element = tile.element; var wrapper = tile.wrapper; TweenLite.to(wrapper, 0.2, { width: tile.width }); TweenLite.to(clone, 0, { scale: 1, autoAlpha: 1, x: tile.x, y: tile.y, onComplete: done }); if (className) TweenLite.to([element, clone], 0.3, { className: className }); function done() { tile.moved = false; TweenLite.set(clone, { autoAlpha: 0 }); TweenLite.set(element, { autoAlpha: 1 }); } } // GET POSITION :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: function getPosition(wrapper, offset) { var position1 = wrapper.offset(); var position2 = container.offset(); return { x: position1.left - position2.left + offset.left, y: position1.top - position2.top + offset.top }; }} }, null); }); }
×