ESP32 dev board with IPI Display and Neo Pixels

[negative_one]

ok im fairly novice with the ESP devices, but having a go from some videos from youtube. I have a ESP32 Dev board and paired it with a ILI9341 LCD Display in order to get an animated gif of an old cassette tape spinning, which i've done successfully.

Next was trying to get a breathing pattern for a neopixel strip of lights, which is starting to confuse me with the order of the coding itself. If i define/include the library, then add under void setup the intialize command, i feel like im doing something wrong under the "void loop" section. If i add the parameters for the LED up the top i can get the lights working, but the GIF is choppy and sometimes the screen doesnt turn on. but if i put the code down the bottom the gif works flawlessly, but the LED's dont turn on.

I've also selected the LED pin as 21, but think its either the fact i have it in the endif section or the fact i've put 3 connections off the only 3v3 power out.

images attached is the code im not sure of, pinout of the board im using and the youtube wiring for the Display.

// TFT_eSPI_memory
//
// Example sketch which shows how to display an
// animated GIF image stored in FLASH memory
//
// written by Larry Bank
// bitbank@pobox.com
//
// Adapted by Bodmer for the TFT_eSPI Arduino library:
// https://github.com/Bodmer/TFT_eSPI
//
// To display a GIF from memory, a single callback function
// must be provided - GIFDRAW
// This function is called after each scan line is decoded
// and is passed the 8-bit pixels, RGB565 palette and info
// about how and where to display the line. The palette entries
// can be in little-endian or big-endian order; this is specified
// in the begin() method.
//
// The AnimatedGIF class doesn't allocate or free any memory, but the
// instance data occupies about 22.5K of RAM.

//#define USE_DMA       // ESP32 ~1.25x single frame rendering performance boost for badgers.h
                        // Note: Do not use SPI DMA if reading GIF images from SPI SD card on same bus as TFT
  #define NORMAL_SPEED  // Comment out for rame rate for render speed test

// Load GIF library
#include <Adafruit_NeoPixel.h>
#include <AnimatedGIF.h>
AnimatedGIF gif;

// Example AnimatedGIF library images
//#include "out.h"
#include "d.h"


                                // ESP32 40MHz SPI single frame rendering performance
                                // Note: no DMA performance gain on smaller images or transparent pixel GIFs
  #define GIF_IMAGE d   //  No DMA  63 fps, DMA:  71fps
//#define GIF_IMAGE spongebob   //  No DMA  63 fps, DMA:  71fps


#include <SPI.h>
#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI();

#define LED_PIN 21
#define LED_COUNT 8

Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRB + NEO_KHZ800);


void setup() {
  Serial.begin(115200);

  tft.begin();
#ifdef USE_DMA
  tft.initDMA();
#endif
  tft.setRotation(1);
  tft.fillScreen(TFT_BLACK);

  gif.begin(BIG_ENDIAN_PIXELS);

  // Initialize NeoPixel
  strip.begin();
  strip.show(); // Initialize all pixels to "off"
}

#ifdef NORMAL_SPEED // Render at rate that is GIF controlled
void loop()
{
  // Put your main code here, to run repeatedly:
  if (gif.open((uint8_t *)GIF_IMAGE, sizeof(GIF_IMAGE), GIFDraw))
  {
    Serial.printf("Successfully opened GIF; Canvas size = %d x %d\n", gif.getCanvasWidth(), gif.getCanvasHeight());
    tft.startWrite(); // The TFT chip slect is locked low
    while (gif.playFrame(true, NULL))
    {
      yield();
    }
    gif.close();
    tft.endWrite(); // Release TFT chip select for other SPI devices
  }
}
#else // Test maximum rendering speed
void loop()
{
  long lTime = micros();
  int iFrames = 0;

  if (gif.open((uint8_t *)GIF_IMAGE, sizeof(GIF_IMAGE), GIFDraw))
  {
    tft.startWrite(); // For DMA the TFT chip slect is locked low
    while (gif.playFrame(false, NULL))
    {
      // Each loop renders one frame
      iFrames++;
      yield();
    }
    gif.close();    
    tft.endWrite(); // Release TFT chip select for other SPI devices
    lTime = micros() - lTime;
    Serial.print(iFrames / (lTime / 1000000.0));
    Serial.println(" fps");
  *}*
*    // Update NeoPixel breathing pattern*
*  for (int i = 0; i < 256; i++) {*
*    int brightness = sin(i * 3.14159 / 128) * 128 + 128;*
*    strip.fill(strip.Color(0, 0, brightness), 0, LED_COUNT);*
*    strip.show();*
*    delay(10);*
*  }*
*  for (int i = 255; i >= 0; i--) {*
*    int brightness = sin(i * 3.14159 / 128) * 128 + 128;*
*    strip.fill(strip.Color(0, 0, brightness), 0, LED_COUNT);*
*    strip.show();*
*    delay(10);*
*  }*
}
#endif

you can ignore the GIFDraw.ino and d.h files as they work, its more trying to under if i should move the "neopixels" part above the gif code in the "void loop". Something i wasnt sure about and yet to try is trying to understand what the #endif command is doing and if me cut n pasting where i have is actually the cause. I've put the code i'm adding in italics.

Also being very new to these modules, am i correct in assuming there is only one power out, being the 3.3v? or could i use the Vin 5v to power some lights?

[xfpd]

Change your delay(10) lines to use millis() or micros()... the short blocking of the 10ms delay might be the issue.